Я думаю, что проблема в том, что ваш значок отображается встроенным с нулевым содержанием.Я думаю, что вам может понадобиться изменить значок на display: inline-block;
и задать ему некоторые размеры.Вы захотите установить размеры 0px
, когда значок не будет виден.
Я преобразовал ваш код из SCSS в CSS и заменил переменные $ фактическими цветами CSS, чтобы сделать рабочий фрагмент..
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba(0,0,0, .2);
width: 240px;
}
.btn--primary {
background-color: red;
color: white;
transition: all .2s;
}
.btn--primary__icon {
display: inline-block;
width: 0px;
height: 0px;
visibility: hidden;
opacity: 0;
}
.btn--primary:hover {
transform: translateY(-2px);
}
.btn--primary:hover .btn--primary__icon {
width: 20px;
height: 20px;
background-color: blue;
visibility: visible;
opacity: 1;
}
<a href="#" class="btn btn--primary">
Discover More
<i class="btn--primary__icon icon-basic-clockwise"></i>
</a>