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

Question

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.

Answer 1

Solved it myself this morning, what I did basically was opened the svg file with a text editor and there was a fill property at the end of the long "Path" attributes, I simply deleted that part and now it works awesome.

example(before):-

<path d="M47.713,274.096c0,3.866,3.134,7,7,7s7-3.134,7-7v-64.653l87.584-`66.53v52.38c0,3.866" fill="#ffffff";/>`

After:-

<path d="M47.713,274.096c0,3.866,3.134,7,7,7s7-3.134,7-7v-64.653l87.584-`66.53v52.38c0,3.866"/>

now everything works, and hover works too... Thanks a lot for still looking into it.