我有这个,我会假设它会起作用,但事实并非如此:

<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-iconcolor属性中显示为白色using?(我可以轻松地添加一个白人类,但我想了解这一点)

推荐答案

这是因为color输入只接受三个属性:"primary""accent""warn".因此,您必须以CSS的方式设置图标的样式:

  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>
    

Angular相关问答推荐

tabindex on button on button in MatMenu in angular不工作

添加@ nx/webpack插件 destruct 了Nativescript构建

尽管有模拟间谍实现,规范文件仍调用真正的服务

PrimeNG面包屑组件生成奇怪的&

Angular KendoGrid RowReorderable,drop不适用于新添加的行

截获火灾前调用公共接口

角路径S异步旋转变压器仍可观察到

如何使用来自不同可观测对象的值更新可观测对象

如何让 ag-Grid 事件读取私有方法?

根据环境变量动态加载Angular templateUrl

我需要取消订阅路由的可观察事件吗

Angular 按钮指令错误地附加子元素

console.log 返回 api 数据但 ERROR TypeError: Cannot read properties of undefined reading 'name'

将查询参数附加到 URL

Angular 6 - NullInjectorError:单元测试中没有 HttpClient 的提供者

Angular 2 - 全局 CSS 文件

如何将组件导入Angular 2中的另一个根组件

@angular/platform-b​​rowser 与 @angular/platform-b​​rowser-dynamic

angular2中的httpinterceptor类似功能是什么?

单元测试错误:无法从同步测试中调用 Promise.then