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

【问题标题】：How to properly change the color of a mat-icon with angular?如何正确更改带角度的垫子图标的颜色？
【发布时间】：2018-09-23 22:15:05
【问题描述】：

我查看了文档并尝试更改 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> 的颜色更改为来自工作调色板的颜色以及不在调色板上的颜色？

谢谢！

【问题讨论】：

首先检查你的 svg 是否在所有情况下都有“fill: currentColor”规则，它必须从父级继承颜色
使用 CSS 类来设置 color 值应该可以工作（但请参阅上面 Alexander2134 的评论），但您不应该像 class="white" color="primary" 那样将 CSS 颜色和图标的颜色属性一起使用。
@Alexandr2134 这就是问题所在。谢谢。有点奇怪，这个网站material.io/icons 会以一种使它们无法使用 color="primary" 的方式分发图标

标签： angular angular-material

【解决方案1】：

使用 NgStyle 指令。

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

【讨论】：

这正是我所需要的。谢谢！
我尝试使用 ngStyle="{ color: white }"。为什么它不起作用？
确保用括号括起来 ngStyle。

【解决方案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 的颜色。

【讨论】：

在 svg 中使用带有多条路径的 mat-icon 怎么样？
如何更改箭头颜色。比如从白到黑？