title: Putting a mat-icon right in the center of a div with flex?
body: <p>Attempting to put a Angular <code>mat-icon</code> right in the center of the containing <code>div</code> :</p>
  
  <pre><code>&lt;div style="background-color: yellow;
              display: flex; 
              flex-direction: column;
              width: 100px;
              height: 120px; 
              align-items:center; 
              justify-content: center; "&gt;
      &lt;mat-icon style="font-size: 60px;"&gt;
      account_circle
      &lt;/mat-icon&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>It does not get centered.  <a href="https://stackblitz.com/edit/angular-material-icon-centering" rel="nofollow noreferrer">This is the stackblitz demo</a>.  </p>
  
  <p>I noticed that when when showing the outline of the <code>mat-icon</code> with developer tooling, it shows that the actual dimensions of the element are right in the middle, but the content of that element are overflowing its boundaries so the icon appears off center.  </p>
  
  <p>Thoughts on how to fix this?</p>