Un bouton dont l'icone change au survol

Bonjour tout le monde

J'aimerais faire un bouton dont l'aspect change au survol. Je vous ai fait un gif pour vous montrer (désolé pour la mauvaise qualité du gif, j'ai fait ça rapidement...). J'ai bien ma petite idée sur la façon de faire, mais je pense que ma méthode n'est pas la meilleure (j'ai utilisé jquery pour changer la classe du bouton). Pourriez vous s'il vous plait me donner une méthode propre, peut-être est il possible de faire ce genre d'icones en full css ?
Pour voir le gif:
https://imgflip.com/gif/igzar

Merci de m'avoir lu et bonne soirée !

Après... les pseudo-éléments étant compatibles dès IE8, pour la plupart des sites c'est ok (sans les animations pour IE8 et IE9). Et cela peut être vu comme une amélioration progressive.