How can I display a mat-icon as disabled-CodePudding

I'm working on an Angular application containing a mat-accordion component with several panels. A panel can be either enabled or disabled. I use a material-ui icon to indicate this. if a panel is enabled I display the check_circle mat-icon. If a panel is disabled I display the hourglass_bottom mat icon. Currently the hourglass_bottom icon is displayed in a blue color. I want it to be displayed in grey color, indicating the panel is disabled. I have this:

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

Currently I apply a class to the button to indicate the disabled state:

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

    &.disabled {
        color: gray;
    }
}

...but that is no material-ui style of course. I expected an attribute [disabled]="true" to exist but it doesn't do anything. I cannot find a disabled material-ui style I can apply conditionally. Using a button element and adding the mat-icon attribute...

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

...as suggested in 'How to make mat-icon disabled in Angular'doesn't work - a normal button gets displayed instead. Probably because the mat-icon element is a child of a <mat-expansion-panel => mat-accordion? Adding color="disabled"

 <mat-icon
        color="disabled"
        >

...has no effect either.

Is it possible to display an icon as disabled?

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

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

CodePudding user response：

Use mat-icon inside the button tag and then you can use disabled OtherWise custom class is a good approach

CodePudding user response：

Your mistake is in your original attribute. [disabled]="true" will ALWAYS be false. Why? Because you are passing a string which happens to have a value of 'true' to an angular attribute expecting a boolean.

INCORRECT:

[disabled]="true"

This passes a string with a value of true.

CORRECT:

[disabled]=true

This passes a boolean to angular.

ALSO CORRECT:

disabled="true"

This first passes a string value of true to the javascript layer which correctly interpolates it to a boolean.

So then:

<button mat-icon-button [disabled]=true >
   <mat-icon >
 {{hasStatusGeleverd ? 'check_circle' : 'hourglass_bottom'}}
   </mat-icon>
</button>