Vertically align Angular Material icons inside Buttons

There are lots of problems with vertical alignment of iconfonts within a <button> when using Angular material buttons. The way I solve this is to utilize the inline attribute. This will cause the icon to correctly scale with the size of the button.

    <button mat-button>
      <mat-icon inline=true>local_movies</mat-icon>
      Movies
    </button>

    <!-- Link button -->
    <a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>

I add the following 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;
}