title: mat-icon in a mat-icon button click doesnt show the foucus correctly
body: <p>I have a mat-icon in a button tag with mat-icon-button attribute. but when I click on the icon, the focus circle is somewhere else. I want it to be on the icon exactly. here are the codes: 
  HTML</p>
  
  <pre><code>&lt;button mat-icon-button class="button"&gt;
    &lt;mat-icon class="menu"&gt;menu&lt;/mat-icon&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    .menu {
    width: 18px;
    height: 12px;
    margin-left: 0px
  }
  
  .button {
    padding-left: 24px;
    margin-bottom: 16px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/VBqwa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VBqwa.jpg" alt="and this is what happens"></a></p>