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"。换句话说，你要么：

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

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>

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>

ng build

Answer 3

或者只是

添加到您的元素

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

例如

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

其中color可以在其他组件等处定义

Answer 4

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

Answer 5

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

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

所述

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

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

Answer 6

由于某种原因，白色无法选择，因此我发现mat-palette($mat-grey, 50)足够接近白色，至少满足我的需求。

Answer 7

这是我用来动态设置颜色的动作，如果未定义变量，则默认为主要主题。

在组件中定义颜色

  /**Sets the button colors - Defaults to primary them color */
  @Input('buttonsColor') _buttonsColor: string

采用您的风格（在此处为无聊）-这会强制图标使用其容器的颜色

.mat-custom{
  .mat-icon, .mat-icon-button{
     color:inherit !important;
  }  
}

在您的html中用div包围按钮

        <div [class.mat-custom]="!!_buttonsColor" [style.color]="_buttonsColor"> 
            <button mat-icon-button (click)="doSomething()">
                <mat-icon [svgIcon]="'refresh'" color="primary"></mat-icon>
            </button>
        </div>

Answer 8

对于未来的读者，这是解释。

您不能直接向 color 指令添加 HTML 颜色（红色、白色、绿色）。
您只能添加（主要、重音和警告）。

<块引用>

这个 color 指令的作用是向基于元素的元素添加类在给定值上

例如：

<mat-icon color="primary">home</mat-icon> <!-- this will add (.mat-primary) class -->
<mat-icon color="accent">home</mat-icon> <!-- this will add (.mat-accent) class -->
<mat-icon color="warn">home</mat-icon> <!-- this will add (.mat-warn) class -->

现在，这些类包含 css color 属性。

//This comes from material theming
.mat-primary {
 color: #3f51b5;
}

看看 color - built-in theme 对这些（mat-primary、mat-accent、mat-warn）有什么作用。

所以如果你想为每个材质组件全局改变颜色，那么create your own custom palette

如果您只想更改单个元素，请按照 sfanjoy's answer

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

8 个答案: