如何在角度材质中设置图标的颜色？

问题描述：

<mat-icon color="white">home</mat-icon>

然后，我也有：

<button mat-raised-button color="accent" type="submit" 
[disabled]="!recipientForm.form.valid"> 
    <mat-icon color="white">save</mat-icon>SAVE 
</button>

该代码段，由于某种原因，没有工作（表演该图标为白色）。

我该如何获得单独的mat-icon显示为白色使用color属性？（我可以很容易地添加一个白色类，但我想了解这一点）

答

这是因为@Input() color只接受三个属性："primary"，"accent"或"warn"。换句话说，您可以：

将您的主题设置为主要/重音为白色。

styles.scss：

@import '[email protected]/material/theming'; 

@include mat-core(); 

$app-primary: mat-palette($mat-white); 
$app-accent: mat-palette($mat-pink); 
$my-app-theme: mat-light-theme($app-primary, $app-accent); 
@include angular-material-theme($my-app-theme);

使用是如下：

<mat-icon color="primary">menu</mat-icon>

或者：

只需添加一个类风格你的图标：
```
.white-icon { 
    color: white; 
} 
```

类添加到您的图标：

<mat-icon class="white-icon">menu</mat-icon>

标记此答案为正确的，如果它有帮助。 :) – Edric

这必须是正确的，但如果嵌入在材料按钮下，它为什么会工作？ –

也许是因为它继承了颜色？毕竟它使用'fill：currentColor;'。 – Edric

答

color="white"不是Angular Material的已知属性。

颜色属性可以更改为primary,accent和warn。如此说doc

你的图标里面的按钮的作品，因为它的父类按钮有css类color:white，或可能是你的color="accent"是白色的。检查开发人员工具以找到它。

默认情况下，图标将使用当前字体颜色

答

<mat-icon style="-webkit-text-fill-color:blue">face</mat-icon>

添加一些描述 – Billa

那么..你有没有考虑过**不是** Webkit的设备？ – Edric

这个答案没有解决问题。上面已经有一个工作解决方案。 – Edric

答

在component.css或app.css添加图标颜色款式

.material-icons.color_green { color: #00FF00; } 
.material-icons.color_white { color: #FFFFFF; }

在组件。HTML设置图标类

<mat-icon class="material-icons color_green">games</mat-icon> 
<mat-icon class="material-icons color_white">cloud</mat-icon>

纳克建立

答

或者干脆

添加到您的元素

[ngStyle]="{'color': , myVariableColor}"

如

<mat-icon [ngStyle]="{'color': myVariableColor}">{{ getActivityIcon() }}</mat-icon>

其中color可以定义在另一个组件等

如何在角度材质中设置图标的颜色？

相关推荐