使用<mat-icon>(角度材料)时,我们可以改变svgicon颜色吗？

Question

所以我有一个svg图标,我使用角度材料来显示它,并希望在悬停时改变颜色,但到目前为止我还没有能够做到这一点.这是参考的代码:

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

当我尝试时,图标出现了

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

在css部分

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

它不起作用.任何帮助将不胜感激,谢谢.

Answer 1

我今天早上自己解决了,我基本上用文本编辑器打开了svg,在长"Path"属性的末尾有一个填充属性,我只是删除了那部分,现在它工作得很棒.

例如(前): -

<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";/>`

后:-

<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"/>

现在一切正常,悬停也起作用...非常感谢你们仍在研究它.

Answer 2

除非另有说明，SVG 图标默认为黑色，您发布的代码似乎可以正常工作，尝试将鼠标悬停时的颜色属性更改为red，看看是否可以看到更改。