how to toggle with font-awesome icons instead of text in jquery

For making a bootstrap modal fullscreen, i use this toggle which works fine.

<!-- Modal content-->
<div class="modal-content">
    
    <div class="modal-header">
        <h3 class="modal-title">Title</h3>
        <span class="fullscreen">Expand</span> <!-- toggle trigger text -->
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        
    </div>
    ...

My jquery:

// fullscreen modal
$(".fullscreen").on('click', function() {
  if($(this).text() == 'Expand'){
       $(this).text('Collapse');
       $(".modal-dialog").addClass("modal-fullscreen");
    }else{
       $(this).text('Expand');
       $(".modal-dialog").removeClass("modal-fullscreen");
    }
});

Now i want to change the words Expand and collapse with font-awesome icons but this the way i tried it below, the toggle does not work anymore because it is not text anymore...

<!-- Modal content-->
<div class="modal-content">

    <div class="modal-header">
        <h3 class="modal-title">Title</h3>
        <span class="fullscreen"><i class="fas fa-expand-arrows-alt"></i></span> <!-- toggle trigger icon -->
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

    </div>
    ...

//jquery
// fullscreen modal
$(".fullscreen").on('click', function() {
  if($(this).text() == '<i class="fas fa-expand-arrows-alt"></i>'){
       $(this).text('<i class="fas fa-compress-arrows-alt"></i>');
       $(".modal-dialog").addClass("modal-fullscreen");
    }else{
       $(this).text('<i class="fas fa-expand-arrows-alt"></i>');
       $(".modal-dialog").removeClass("modal-fullscreen");
    }
});

How can i make this work with the font-awesome icons?