如何在Angular Material中设置图标的颜色? [英] How to set the color of an icon in Angular Material?

问题描述

我有这个，我以为可以工作，但是没有:

I have this, which I would assume to work, but doesn't:

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

出于某些原因，此代码段确实起作用(将图标显示为白色).

This code snippet, for some reason, does work (shows the icon as white).

如何使用color属性将孤独的mat-icon显示为白色 ? (我可以轻松地添加一个白人班，但我想理解这一点)

How do I get the lone mat-icon to show up as white using the color attribute? (I can easily just add a white class, but I want to understand this)

推荐答案

这是因为color输入仅接受三个属性:"primary"，"accent"或"warn".换句话说，您可以:

That's because the color input only accepts three attributes: "primary", "accent" or "warn". In other words, you either:

1. 将主题设置为白色以表示主要/重音符号.

1. Set your theme as white for primary/ accent.

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

编辑:如果您查看

If you view the list of palettes that are available in the _palette.scss file, there's no such $mat-white palette variable being declared. As such, this approach is invalid.

使用如下所示的类:

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

或者:

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

1. Just add a class to style your 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;
}

将课程添加到您的图标:

Add the class to your icon:

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

这篇关于如何在Angular Material中设置图标的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！