Иконки на кнопках

<!--Иконки на кнопках-->
<!--https://mt-webdesign.ru/buttons-icon-->
<!--Перечисляем классы своих кнопок через запятую .button-1,.button-2 и т.д-->
<!--Иконка слева от текста-->
<script>
$('.icon-button,.icon-button').addClass("button-icon-left");
</script>
<!--Иконка справа от текста-->
<script>
$('.icon-button,.icon-button').addClass("button-icon-right");
</script>
<style>
:root {
/*Настройки иконок*/
--IconWidth: 31px; /*Ширина иконки*/
--IconHeight: 31px; /*Высота иконки*/
--MarginRight: 10px; /*Отступ справа от иконки до текста (иконка находится слева)*/
--MarginLeft: 10px; /*Отступ слева от иконки до текста (иконка находится справа)*/
--IconDuration: 0.2s; /*Продолжительность анимации иконки, при наведении на кнопку (выставить значение такое же, что и у самой кнопки, при наведении на неё)*/
--IconTransformRight: 0px; /*Сдвиг иконки вправо, при наведении (иконка находится справа)*/
--IconTransformLeft: 0px; /*Сдвиг иконки вправо, при наведении (иконка находится слева)*/
}
</style>
<!--Ниже не трогаем-->
<style>
.button-icon-left .tn-atom {
transition-duration: var(--IconDuration);
}
.button-icon-right .tn-atom {
transition-duration: var(--IconDuration);
}
.button-icon-left .tn-atom:before {
content: '';
width: var(--IconWidth);
height: var(--IconHeight);
margin-right: var(--MarginRight);
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
vertical-align: middle;
position: relative;
transition-duration: var(--IconDuration);
}
.button-icon-right .tn-atom:after {
content: '';
width: var(--IconWidth);
height: var(--IconHeight);
margin-left: var(--MarginLeft);
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
vertical-align: middle;
position: relative;
transition-duration: var(--IconDuration);
}
</style>

<!--Иконка слева от текста-->
<style>
/*Иконка в пасивном состоянии*/
.icon-button .tn-atom:before {
left: 0;
transition-duration: var(--IconDuration);
background-image: url(url);
}
/*Иконка в активном состоянии*/
.icon-button .tn-atom:hover:before {
transition-duration: var(--IconDuration);
left: var(--IconTransformLeft);
background-image: url(url);
}
</style>

<!--Иконка справа от текста-->
<style>
/*Иконка в пасивном состоянии*/
.icon-button .tn-atom:after {
left: 0;
transition-duration: var(--IconDuration);
background-image: url(url);
}
/*Иконка в активном состоянии*/
.icon-button .tn-atom:hover:after {
transition-duration: var(--IconDuration);
left: var(--IconTransformRight);
background-image: url(url);
}
</style>