title: <mat-icon> doesn't look like expected
body: <p>I want to use a <code>&lt;mat-icon&gt;</code> so I looked it up and i found this:</p>
  <pre><code>&lt;button mat-icon-button color=&quot;primary&quot; aria-label=&quot;Example icon button with a home icon&quot;&gt;
          &lt;mat-icon&gt;home&lt;/mat-icon&gt;
  &lt;/button&gt;
  </code></pre>
  <p>(<a href="https://material.angular.io/components/button/examples" rel="nofollow noreferrer">https://material.angular.io/components/button/examples</a>)</p>
  <p>but the problem is it looks like this:
  <a href="https://i.stack.imgur.com/p9ray.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p9ray.gif" alt="enter image description here" /></a></p>
  <p>and it should look like this:
  <a href="https://i.stack.imgur.com/qLnIC.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qLnIC.gif" alt="enter image description here" /></a></p>
  <p>How can i fix this?</p>