如何将一个垫子图标显示为禁用

Question

我正在开发一个Angular应用程序，其中包含一个带有多个面板的mat-accordion组件。可以启用或禁用面板。我使用材质界面图标来表示这一点。如果一个面板是启用的，我显示check_circle垫子图标。如果面板被禁用，我将显示hourglass_bottom mat图标。目前，hourglass_bottom图标显示为蓝色。我希望它以灰色显示，表明面板被禁用。我有这个:

<mat-icon
[ngClass]="{'icon-accordeon': true, 'disabled': !hasStatusGeleverd}">
{{hasStatusGeleverd ? 'check_circle' : 'hourglass_bottom'}}
</mat-icon>

现在我给按钮应用了一个类来指示禁用状态:

.mat-icon {
color: mat.get-color-from-palette($palette-politie-blauw, 700);
&.disabled {
color: gray;
}
}

…但这当然不是材料ui风格。我期望属性[disabled]="true"存在，但它不做任何事情。我找不到可以有条件应用的禁用材质界面样式。使用button元素并添加mat-icon属性…

<button mat-icon ...>...</button>

…正如"如何在Angular中禁用mat-icon"中所建议的那样，它不起作用——取而代之的是一个普通的按钮。可能是因为mat-icon元素是mat-accordion吗?添加颜色="disabled">

<mat-icon
color="disabled"
class="icon-accordeon">

…也没有效果

是否可以将图标显示为禁用?

"@angular/core":"^ 12.2.16",

"@angular/material":"^ 12.2.13",

Answer 1

在按钮标签中使用mat-icon然后你可以用disabled否则，自定义类是一个很好的方法