title: Angular Material icon button formatting
body: <p>This question has a <a href="https://stackblitz.com/edit/angular-material-dome8b" rel="nofollow noreferrer">Stackblitz demo</a>; Given the following <a href="https://material.angular.io/components/button/overview" rel="nofollow noreferrer">Angular Material button</a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button md-button&gt;
    &lt;span&gt;Foo&lt;/span&gt;
    &lt;md-icon&gt;keyboard_arrow_down&lt;/md-icon&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>How can I increase the gap between <code>Foo</code> and the icon (see below):</p>
  
  <p><a href="https://i.stack.imgur.com/yLZv0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yLZv0.png" alt="enter image description here"></a></p>
  
  <p>I thought this would be easy but Angular Material wraps the contents in <code>&lt;span class="mat-button-wrapper"&gt;</code> so the final markup is more like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button&gt;
    &lt;span class="mat-button-wrapper"&gt;
      &lt;span&gt;Foo&lt;/span&gt;
      &lt;mat-icon&gt;keyboard_arrow_down&lt;/mat-icon&gt;
    &lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>So far I've got as far as adding the following CSS to make the wrapper fill the available space but I can't see how to progress:</p>
  
  <pre><code>.mat-button-wrapper {
    display: inline-block;
    width: 100%;
  }
  </code></pre>