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

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

那是因为颜色输入只接受三个属性：“主要”,“重音”或“警告”.换句话说,你要么：

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

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);

>使用方法如下：

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

要么：

>只需添加一个类来设置图标的样式：

.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;
}

>将课程添加到您的图标：

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