icon not showing on hover using sass - css

Question

I am using scss and trying to hide an icon and when I hover the button I want the icon to display. I also want to animate it so I can't use display:none as I believe you can't animate that. So I have tried to use opacity and visibility.
I have 2 problems. Firstly, The text in the button is not centered because the icon is there in an invisible state yet when you go to dev tools you can still see it there. Secondly, the icon does not appear on hover.
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba($color-black, .2);
&--primary {
background-color: $color-primary;
color: $color-white;
transition: all .2s;
&__icon {
visibility: hidden;
opacity: 0;
}
&:hover {
transform: translateY(-2px);
&__icon {
visibility: visible;
opacity: 1;
}
}
}
}
Discover More <i class="btn--primary__icon icon-basic-clockwise"></i>

Answer 1

I think the problem is that your icon is displayed inline with zero content. I think you might need to change the icon to display: inline-block; and give it some dimensions. You'll want to set the dimensions to 0px when the icon should not be visible.
I converted your code from SCSS to CSS and replaced the $variables with actual CSS colors to make a working snippet...
.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>