title: Angular Material How to disable an svg icon
body: <p>Similar to the classic bootstrap disabled state - </p>
  
  <p><code>&lt;button type="button" class="btn btn-lg btn-primary" disabled&gt;Primary button&lt;/button&gt;</code></p>
  
  <p>I'd like to simulate a <code>disabled</code> state on an <code>Angular Materials</code> svg icon using <code>cursor: not-allowed</code> css. But I want to disable the click event.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.toolbar-icon-disabled {
      fill: gray;
      cursor: not-allowed;
      pointer-events: none;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="true"&gt;&lt;/mat-icon&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Problem here is that I CANNOT use both <code>not-allowed</code> and <code>pointer-events: none</code>, as they appear to be mutually exclusive.</p>
  
  <p>ex/ Here you can see that my left-most icon appears disabled, as the <code>fill</code> color is gray; however, it's still clickable if I add <code>cursor: not-allowed</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/Be1s5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Be1s5.png" alt="left icon disabled"></a></p>
  
  <p>I couldn't copy/paste the not-allowed circle from my screen, but here's an example:</p>
  
  <p><a href="https://i.stack.imgur.com/HkYpY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HkYpY.png" alt="enter image description here"></a></p>