与 <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

并查看是否可以看到更改。

Answer 3

将 SVG 的填充变量写入

currentColor

，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>

之后你可以像这样改变颜色：

<mat-icon svgIcon="hero" style="color: red;" />