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

使用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>

<强>演示

我创建了一个demo on stackblitz，可以更改SVG mat-icon的颜色。

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

2 个答案: