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

<!--Перечисляем классы своих кнопок через запятую .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>