如何在Angular Material中设置图标的颜色？

Question

我有这个,我会假设工作,但不是:

<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属性？(我可以很容易地添加一个白班,但我想了解这一点)

Answer 1

那是因为color输入只接受三个属性:"primary","accent"或"warn".换句话说,你要么:

1. 将主题设置为主要/重音的白色.

   styles.scss:

   @import '~@angular/material/theming';
   
   @include mat-core();
   
   $app-primary: mat-palette($mat-white);
   $app-accent:  mat-palette($mat-pink);
   $app-theme: mat-light-theme($app-primary, $app-accent);
   @include angular-material-theme($app-theme);
   

2. 使用方法如下:

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

要么:

1. 只需添加一个类来设置您的图标样式:

   .white-icon {
       color: white;
   }
   /* Note: If you're using an SVG icon, you should make the class target the `<svg>` element */
   .white-icon svg {
       fill: white;
   }
   

2. 将课程添加到您的图标:

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

Answer 2

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

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

在component.html中设置图标类

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

建立

Answer 3

或者干脆

添加到您的元素

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

例如

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

哪里color可以定义在另一个组件等

Answer 4

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

颜色属性可以改变primary，accent和warn。如本文档所述

您的按钮内的图标有效，因为其父类按钮具有 css 类color:white，或者可能是您color="accent"的白色。检查开发人员工具以找到它。

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

Answer 5

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