title: How to add icon to mat-icon-button
body: <p>I am using Angular with Material</p>
  
  <pre><code> &lt;button mat-icon-button&gt;&lt;mat-icon svgIcon="thumb-up"&gt;&lt;/mat-icon&gt;Start Recording&lt;/button&gt;
  </code></pre>
  
  <p>I am trying to add an icon to button, but I can't figure out how to do it, and can't find documentation for this.</p>
  
  <p><a href="https://material.angular.io/components/button/api" rel="noreferrer">https://material.angular.io/components/button/api</a></p>
  
  <p>looking the docs, there is this:</p>
  
  <p><a href="https://i.stack.imgur.com/Zl2KI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Zl2KI.png" alt="enter image description here"></a></p>
  
  <p>that button has the following html:</p>
  
  <pre><code>&lt;a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"&gt;&lt;span class="mat-button-wrapper"&gt;
      &lt;img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg"&gt;
      &lt;span _ngcontent-c1=""&gt;Material&lt;/span&gt;
    &lt;/span&gt; &lt;div class="mat-button-ripple mat-ripple" matripple=""&gt;&lt;/div&gt;&lt;div class="mat-button-focus-overlay"&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>is that the right way to do it?</p>