How to add icon to mat-icon-button

Question

I am using Angular with Material    lt button mat-icon-button gt  lt mat-icon svgIcon  thumb-up  gt  lt  mat-icon gt Start Recording lt  button gt    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    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    is that the right way to do it

User · Answer

The Material icons use the Material icon font, and the font needs to be included with the page.

Here's the CDN from Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

User · Answer

All you need to do is add the mat-icon-button directive to the button element in your template  Within the button element specify your desired icon with a mat-icon component   You ll need to import MatButtonModule and MatIconModule in your app module file   From the Angular Material buttons example page  hit the view code button and you ll see several examples which use the material icons font  eg    lt button mat-icon-button gt     lt mat-icon aria-label  Example icon-button with a heart icon  gt favorite lt  mat-icon gt   lt  button gt    In your case  use   lt mat-icon gt thumb up lt  mat-icon gt    As per the getting started guide at https   material angular io guide getting-started  you ll need to load the material icon font in your index html    lt link href  https   fonts googleapis com icon family Material Icons  rel  stylesheet  gt    Or import it in your global styles scss    import url  https   fonts googleapis com icon family Material Icons      As it mentions  any icon font can be used with the mat-icon component

User · Answer

Add to app module ts     import  MatIconModule  from   angular material icon      amp  link in your global index html

User · Answer

Just add the  lt mat-icon gt  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    lt button mat-button gt       lt mat-icon gt mic lt  mat-icon gt      Start Recording  lt  button gt    OR    lt button mat-raised-button color  accent  gt       lt mat-icon gt mic lt  mat-icon gt      Start Recording  lt  button gt    Here is a link to stackblitz demo

User · Answer

the above CSS can be written in SASS as follows  and it actually includes all button types  instead of just button mat-button   button  a        amp  mat-button       amp  mat-raised-button       amp  mat-flat-button       amp  mat-stroked-button            mat-icon               vertical-align  top              font-size  1 25em

User · Answer

My preference is to utilize the inline attribute   This will cause the icon to correctly scale with the size of the button        lt button mat-button gt         lt mat-icon inline true gt local movies lt  mat-icon gt        Movies      lt  button gt        lt  -- Link button -- gt       lt a mat-flat-button color  accent  routerLink   create  gt  lt mat-icon inline true gt add lt  mat-icon gt  Create lt  a gt    I add this to my styles css to    solve the vertical alignment problem of the icon inside the button material icon fonts are always a little too small compared to button text   button mat-button  mat-icon  a mat-button  mat-icon  a mat-raised-button  mat-icon  a mat-flat-button  mat-icon  a mat-stroked-button  mat-icon     vertical-align  top    font-size  1 25em

[angular-material2] How to add icon to mat-icon-button

Examples related to angular-material2

Examples related to angular5