Toggling Font Awesome Icons

A basic <i> tag you'd get from font awesome would look like the following:

<i class='fas fa-play')></i>

As you can see, it is consisted of two different classes.
fas is fixed, so when you toggle an icon, the only part that changes is fa-play part, which is a unique name of an icon.

If you were to increase the icon's size, you can add fa-lg class, making a total of 3 classes for an element.

<i class='fas fa-play fa-lg')></i>

Here is how I implemented toggling of a play and pause button, along with a feature that plays or pauses an audio file on click event. *Rearranged fa-lg's position to come before the icon's name so that only the name part of the class is toggled.

HTML

<td id="audio-play-button" contenteditable="true"><i id="fa-el" onclick="togglePlay(this)" class='fas fa-lg fa-play')></i></td>

Javascript

let myAudio = document.getElementById("myAudio");
let audioEl = document.getElementById('audio-play-button')

function togglePlay(e) {
    if (myAudio.paused) {
        myAudio.play();
        e.classList.toggle('fa-pause');
        e.classList.toggle('fa-play');
    } else {
        myAudio.pause();
        e.classList.toggle('fa-pause');
        e.classList.toggle('fa-play');
    }
};