How to add icon to mat-icon-button

Question

I am using Angular with Material

 <button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button> 

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.

https://material.angular.io/components/button/api

looking the docs, there is this:

that button has the following html:

<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">     <img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">     <span _ngcontent-c1="">Material</span>   </span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"> </div> </a> 

is that the right way to do it?

Answer 1

Just add the <mat-icon> inside mat-button or mat-raised-button. See the example below. Note that I am using material icon instead of your svg for demo purpose:

<button mat-button>     <mat-icon>mic</mat-icon>     Start Recording </button> 

OR

<button mat-raised-button color="accent">     <mat-icon>mic</mat-icon>     Start Recording </button> 

Here is a link to stackblitz demo.