Seems there is no normal (I mean “fast and easy”) way to toggle icon, so… maybe replace it?

  var btn = $(this).find("button:eq(0)");

  const iconToggle = () => {
    const isCheckIcon = btn.find('.fa-check').length > 0;
    if (isCheckIcon) {
      btn.html('<i class="far fa-save"></i>')
    } else {
      btn.html('<i class="fas fa-check"></i>')
    }
  }

  iconToggle();
  setTimeout(iconToggle, 2000);

Example here: jsfiddle

Used info: here.

P.S. Some explanation: this icon is not controlled by CSS, so toggling the class is not enough. You should also toggle the ‘data-*’ attributes… But it could be possible if only the image inside would be static, but it is generated SVG… I’ve tried to play with classes and data attributes for a while, but it takes so much time.

So I’ve got a Bootstrap 4 modal with a table in.

<div id="modaledithistory" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content px-2">
            <div class="modal-header">
                <button type="button" class="btn float-right" data-dismiss="modal"><i class="fas fa-times float-right"></i></button>
            </div>
            <div class="modal-body">
                <div id="edit_history_table">
                  <table class="table table-bordered table-responsive-md table-striped text-center">
                    <thead>
                      <tr>
                        <th class="text-center px-5">Example</th>
                        <th class="text-center">Example</th>
                        <th class="text-center">Example</th>
                        <th class="text-center">Example</th>
                        <th class="text-center">Example</th>
                        <th class="text-center px-5">Example</th>
                      </tr>
                    </thead>
                    <tbody id="edit_history_table_body">
                      <tr class="hide">
                        <td class="pt-3-half" contenteditable="false">Example</td>
                        <td class="pt-3-half" contenteditable="true">Example</td>
                        <td class="pt-3-half" contenteditable="true">Example</td>
                        <td class="pt-3-half" contenteditable="true">Example</td>
                        <td class="pt-3-half" contenteditable="true">Example</td>
                        <td>
                          <span class="table-save">
                             <button type="button" class="btn btn-outline-success btn-rounded btn-sm my-0 waves-effect waves-light">
                                <i class="far fa-save"></i>
                             </button>
                          </span> 
                          <span class="table-remove">
                             <button type="button" class="btn btn-outline-danger btn-rounded btn-sm my-0 waves-effect waves-light">
                                <i class="far fa-trash-alt"></i>
                             </button>
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

The first icon is a saving icon and I want it to change to a check mark when clicked (forever or for 5 seconds or something).
The Matching javascript is this

const $tableID = $('#edit_history_table');

 $tableID.on('click', '.table-save', function () {
    // SOME OTHER CODE THAT HAS NOTHING TO DO WITH THE ICON
    
    var btn = $(this).find("button:eq(0)");
    var icon = btn.find("i:eq(0)");

    console.log(btn);
    console.log(icon);
    
    
    //icon.toggle('1000');
    $(this).find('i').toggleClass('far').toggleClass('fas').toggleClass('fa-save').toggleClass('fa-check');
    //icon.toggleClass("far fa-save fas fa-check");
    
    /*
    if (icon.hasClass("fa-save")) {
        icon.addClass("fas").addClass("fa-check").removeClass("far").removeClass("fa-save");
    } else {
        icon.addClass("far").addClass("fa-save").removeClass("fas").removeClass("fa-check");
    }
    */
    
    //btn.button("refresh");
    btn.buttonMarkup('refresh');
 });

I’ve tried quite a number of things already (left some of it in the comments) but I can’t get it to work properly.
As it is now it’ll work BUT buttonMarkup() is deprecated so I have no idea why it actually works (it also generates an “Uncaught TypeError: btn.buttonMarkup is not a function” error).

I didn’t even know I had to ‘refresh’ a buttons UI when changing a class. Anyone who can point me in the right direction?

https://jsfiddle.net/ogk93uhr/1/