How to mouseover change the color of a font-awesome 5 icon color with angular 9?

Question

I am using ( https://github.com/FortAwesome/angular-fontawesome ) and everything looks good with what the basic documentation has:

<fa-icon [icon]="faCoffee"></fa-icon>

My issue is I want to have a 'hover to change color'. When I do the following:

<fa-icon [icon]="faCoffee" [inverse]="true" class="colorchange"></fa-icon>

Then have CSS that says:

.colorchange {
}

.colorchange:hover {
color:red !important;
}

The CSS appears to do nothing. What is the right way to get a simple basic hover color change to work? I tried wrapping the fa-icon element with a span tag and applied a class to that and it didn't work either.

Answer 1

Here is a quick workaround. Going through their source , it can be seen they use a selector class called ng-fa-icon . So applying :hover pseudo to this class should work.

.ng-fa-icon.hover-hightlight:hover {
  color: red;
}

<fa-icon class="hover-hightlight" [icon]="['fas', 'square']"></fa-icon>

Working example: Stackblitz