Add Icon to toggle button event using JavaScript

function toggledDeleteAllBtn(){
        if( $('.customer_checkbox:checked').length > 0){
            $('#sel_button').text('Deleted all selected('+$('.customer_checkbox:checked').length+')');
          
        }else{
            $('#sel_button').text('Delete all selected');
        }

        
    }

            <tr id="sid">
                <th>ID</th>
                <th>phone number</th>
                <th>remarks</th>
                <th>date</th>
                <th></th>
                <th><input type="checkbox" name="main-checkbox"></th>
                <th><button class="btn btn-danger btn-sm" id="sel_button" name="sel_button" ><i class="glyphicon glyphicon-trash" id="trash_icon"></i>Delete all </button></th>
        

            </tr>

May I know how to add icon trash in iclass to the function toggleDeleteAllBtn() so that the icon will always be shown up no matter what changes have been done? (need to make some modifications in toggleDeleteAllBtn())
thank you!

I used back my preferred icon by taking Mamun's answer as the references. (Just realised that Mamun has deleted his original answer since he is using font awesome instead of glyphicon. Anyway, thanks very much for giving me the ideas!)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function toggledDeleteAllBtn() {
  if ($('.customer_checkbox:checked').length > 0) {
    $('#sel_button').html('<i class="glyphicon glyphicon-trash" </i>Delete all selected(' + $('.customer_checkbox:checked').length + ')');
  } else {
    $('#sel_button').html('<i class="glyphicon glyphicon-trash" </i>Delete all selected');
  }
}
$(document).on('click', '.customer_checkbox', toggledDeleteAllBtn);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<script src="plugins/Jquery-Table-Check-All/dist/TableCheckAll.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>

<table>
  <tr id="sid">
    <th> ID </th>
    <th> phone number </th>
    <th> remarks </th>
    <th> date </th>
    <th></th>
    <th><input type="checkbox" class="customer_checkbox" name="main-checkbox"></th>
    <th><button class="btn btn-danger btn-sm" id="sel_button" name="sel_button"><i class="glyphicon glyphicon-trash" </i> Delete all selected</button></th>
  </tr>
</table>

<!-- end snippet -->