title: How to set the color of an icon in Angular Material?
body: <p>I have this, which I would assume to work, but doesn't:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-icon color="white"&gt;home&lt;/mat-icon&gt;
  </code></pre>
  
  <p>Then, I also have:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button mat-raised-button color="accent" type="submit"
   [disabled]="!recipientForm.form.valid"&gt;
      &lt;mat-icon color="white"&gt;save&lt;/mat-icon&gt;SAVE
  &lt;/button&gt;
  </code></pre>
  
  <p>This code snippet, for some reason, does work (shows the icon as white).</p>
  
  <p>How do I get the lone <code>mat-icon</code> to show up as white <em>using</em> the <code>color</code> attribute? (I can easily just add a white class, but I want to understand this)</p>