title: Material components mat-button and mat-icon alignment
body: <p>The material components are nice but confusing for customization.
  Can you please advise on how to align both horizontally and vertically a <em>mat-icon</em> inside a <em>mat-button</em>?</p>
  <p>This HTML:</p>
  <pre><code>  &lt;button mat-button
           class=&quot;closeX-btn&quot;&gt;    
      &lt;mat-icon class=&quot;closeX-icon&quot;&gt;  
        clear&lt;/mat-icon&gt;
    &lt;/button&gt;
  </code></pre>
  <p>and this SCSS:</p>
  <pre><code>.closeX-btn {
    border: thin solid orange;
  }
  
  .closeX-icon {
    font-weight: bold;
    height:18px;
    width:18px;
    line-height: 18px;
    font-size:18px;
    border: thin solid red;
  }
  </code></pre>
  <p>produces this:</p>
  <p><a href="https://i.stack.imgur.com/7Xo33.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Xo33.png" alt="enter image description here" /></a></p>
  <p>A change of SCSS of the button to:</p>
  <pre><code>.closeX-btn {
    height: 18px;
    width: 18px;
    border: thin solid orange;
  }
  </code></pre>
  <p>produces this:</p>
  <p><a href="https://i.stack.imgur.com/jnaP4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jnaP4.png" alt="enter image description here" /></a></p>
  <p>And if we change: <em>mat-button</em> to: <em>mat-icon-button</em>:</p>
  <pre><code>  &lt;button mat-icon-button
           class=&quot;closeX-btn&quot;&gt;    
      &lt;mat-icon class=&quot;closeX-icon&quot;&gt;  
        clear&lt;/mat-icon&gt;
    &lt;/button&gt;
  </code></pre>
  <p>We get this:</p>
  <p><a href="https://i.stack.imgur.com/mQ30u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mQ30u.png" alt="enter image description here" /></a></p>
  <p><strong>The desired outcome is</strong>:</p>
  <ul>
  <li>the button border is exactly around the icon,</li>
  <li>in other words, the orange border is right around the red border</li>
  <li>while, always matching the size of the icon - no margins, no padding, (no space around)</li>
  </ul>
  <p>For <em>mat-button</em> like this:</p>
  <p><a href="https://i.stack.imgur.com/64YH0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/64YH0.png" alt="enter image description here" /></a></p>
  <p>and for <em>mat-icon-button</em> like this:</p>
  <p><a href="https://i.stack.imgur.com/XNTVA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XNTVA.png" alt="enter image description here" /></a></p>