title: How can I display a mat-icon as disabled
body: <p>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:</p>
  <pre><code>  &lt;mat-icon
      [ngClass]=&quot;{'icon-accordeon': true, 'disabled': !hasStatusGeleverd}&quot;&gt;
        {{hasStatusGeleverd ? 'check_circle' : 'hourglass_bottom'}}
    &lt;/mat-icon&gt;
  </code></pre>
  <p>Currently I apply a class to the button to indicate the disabled state:</p>
  <pre><code>.mat-icon {
      color: mat.get-color-from-palette($palette-politie-blauw, 700);
  
      &amp;.disabled {
          color: gray;
      }
  }
  </code></pre>
  <p>...but that is no material-ui style of course. I expected an attribute [disabled]=&quot;true&quot; 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...</p>
  <pre><code>&lt;button mat-icon ...&gt;...&lt;/button&gt;
  </code></pre>
  <p>...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 &lt;mat-expansion-panel =&gt; mat-accordion?
  Adding color=&quot;disabled&quot;</p>
  <pre><code> &lt;mat-icon
          color=&quot;disabled&quot;
          class=&quot;icon-accordeon&quot;&gt;
  </code></pre>
  <p>...has no effect either.</p>
  <p>Is it possible to display an icon as disabled?</p>
  <p>&quot;@angular/core&quot;: &quot;^12.2.16&quot;,</p>
  <p>&quot;@angular/material&quot;: &quot;^12.2.13&quot;,</p>