Can we change svgicon color when using with <mat-icon> (angular material)

So I have an svg icon, I am using angular material to display it and wanted to change the color on hover but so far I haven't been able to do that. Here's the code for reference:

<mat-icon svgIcon="menu"></mat-icon>


The icon comes up however when I try,

<mat-icon class="color" svgIcon="menu"></mat-icon>


and in css part

.color:hover, .color:active{
color: black;
fill: black;
}


It doesn't work. Any help will be appreciated, thanks.

Continue reading...