title: How to properly change the color of a mat-icon with angular?
body: <p>I have looked at the documentation and I have tried to change the color of a mat-icon like so:</p>
  
  <pre><code>&lt;mat-icon class="white" color="primary" svgIcon="back"&gt;&lt;/mat-icon&gt;&lt;span class="backText"&gt;back&lt;/span&gt;
  </code></pre>
  
  <p>The above is how the element looks in the html. I have tried to change the color of the icon by adding a class with a color of white. Which does not work. I have tried adding the directive color="primary" which does not work either while all my buttons that look like this</p>
  
  <pre><code> &lt;button mat-button color='primary'&gt;example button&lt;/button&gt;
  </code></pre>
  
  <p>do receive the color. I want to get my mat-icon to change color with the color palette because this should work according to the docs. But ultimately I would also like to be able to change the color of the icon to white which is a color not on my color palette. </p>
  
  <p>How can I change the color of <code>&lt;mat-icon&gt;</code> to a color from a working color palette as well as a color not on the color palette?</p>
  
  <p>Thanks!</p>