jQuery: change link text and icon on click

Question

So I am trying to change the the icon of my link for collapse section alongside with the text of the link.

Here is my code:

<a href="#collapse", class="btn", role="button", data-bs-toggle="collapse" id="btn-collapse">
    <i class="material-icons" style="vertical-align: middle;">expand_more</i>
    <label style="vertical-align: middle;">PRIMARY TEXT</label>
</a>

<!--CONTENT-->

<script>
    $(document).ready(function(){
        $('#btn-collapse').on('click', function () {
            var text=$('#btn-collapse').text();
            if(text === "SECONDARY TEXT"){
                $(this).text('PRIMARY TEXT');
                $(this).find("i").html("expand_more");
            } else{
                $(this).text('SECONDARY TEXT');
                $(this).find("i").html("expand_less");
            }
        });
    });
</script>

I've been trying to find a solution for this for a while now, but nothing seems to work.. Text changes fine, but the icon completely vanishes on click. I don't think it is a major issue, but there is something I don't get with this. Any help here how to adjust?