[Javascript] Toggle Icon Class - cambiar ícono con click sobre botón

Buscando una manera simple de cambiar un ícono por otro al hacer click sobre un botón, haciendo uso Javascript solamente (sin JQuery). Encontré sobre classList, en particular classList.toggle que justamente nos permite agregar o quitar una propiedad de un elemento.

En este caso estaba jugando para cambiar un ícono de FontAwesome de Play/Pause en esta sección de mi página.

Entonces simplemente encontrando mi elemento y usando toggle pude quitar la clase de “play” y agregar la clase de “pause”.

  var icon = document.getElementById('icon');
  icon.classList.toggle('fa-pause');
  icon.classList.toggle('fa-play');

Como quiero que esto ocurra cuando hago click, lo agrego como evento de click al botón.

document.getElementById('play-button').addEventListener('click', function(){
  var icon = document.getElementById('icon');
  icon.classList.toggle('fa-pause');
  icon.classList.toggle('fa-play');
})

Pueden ver los cambios completos hechos en este commit.