如何正确改变带有角度的垫子图标的颜色？

Question

我查看了文档，并尝试更改垫子图标的颜色，如下所示：

<mat-icon class="white" color="primary" svgIcon="back"></mat-icon><span class="backText">back</span>

以上是元素在html中的外观。 我试图通过添加带有白色的类来更改图标的颜色。 哪个不起作用。 我尝试添加指令color =“ primary”，该指令在我所有看起来像这样的按钮都无效的情况下

 <button mat-button color='primary'>example button</button>

会收到颜色。 我想让我的Mat-icon用调色板更改颜色，因为这应该根据文档工作。 但最终，我还希望能够将图标的颜色更改为白色，这是我的调色板上没有的颜色。

如何将<mat-icon>的颜色更改为工作调色板中的颜色以及不在调色板上的颜色？

谢谢！

Answer 1

使用NgStyle指令。

<mat-icon [ngStyle]="{'color':'white'}">home</mat-icon>

Answer 2

您有两个选项可以更改mat-icon的颜色。

颜色属性

您可以使用color属性，该属性将使用主题中指定的值。 它仅接受三个属性： "primary" ， "accent"或"warn" 。

<mat-icon color="primary" svgIcon="archive"></mat-icon>
<mat-icon color="accent" svgIcon="archive"></mat-icon>
<mat-icon color="warn" svgIcon="archive"></mat-icon>

自订样式

添加具有指定color的自定义样式类：

.green-icon {
    color: green;
}

将课程添加到您的图标：

<mat-icon class="green-icon" svgIcon="archive"></mat-icon>

演示版

我已经在stackblitz上创建了一个演示，该演示会更改SVG mat-icon颜色。