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

发布时间：2020-12-17 07:26:06 所属栏目：安全来源：网络整理

导读：我有这个,我会假设工作,但不是： 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-iconSAVE/button 此代码段由于某种原

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

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

此代码段由于某种原因确实有效(将图标显示为白色).

如何使用color属性将单独的mat-icon显示为白色？ (我可以很容易地添加一个白班,但我想了解这一点)

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

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

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!