如何正确地改变带有角度的垫子图标的颜色? [英] 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>

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

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.

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

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屋！