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

Question

我看了看文档，并尝试像下面这样更改mat-icon的颜色：

<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

您有两个选项可以更改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。

Answer 2

使用NgStyle指令。

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