如何正确更改带有角度的垫子图标的颜色? [英] How to properly change the color of a mat-icon with angular?

问题描述

我查看了文档，并尝试像这样更改垫子图标的颜色:

I have looked at the documentation and I have tried to change the color of a mat-icon like so:

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

上面是元素在html中的样子.我试图通过添加一个白色的类来改变图标的​​颜色.这不起作用.我已经尝试添加指令 color="primary" ，而我的所有按钮看起来都像这样

The above is how the element looks in the html. I have tried to change the color of the icon by adding a class with a color of white. Which does not work. I have tried adding the directive color="primary" which does not work either while all my buttons that look like this

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

收到颜色.我想让我的垫子图标用调色板改变颜色，因为这应该根据文档工作.但最终我也希望能够将图标的颜色更改为白色，这是我的调色板中没有的颜色.

do receive the color. I want to get my mat-icon to change color with the color palette because this should work according to the docs. But ultimately I would also like to be able to change the color of the icon to white which is a color not on my color palette.

如何将 的颜色更改为工作调色板中的颜色以及不在调色板上的颜色?

How can I change the color of <mat-icon> to a color from a working color palette as well as a color not on the color palette?

谢谢！

推荐答案

使用 NgStyle 指令.

Use NgStyle directive.

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

这篇关于如何正确更改带有角度的垫子图标的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！