Icons inside mat-icon-button not vertically centered.

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Icons inside mat-icon-button should be perfectly vertically centered.

What is the current behavior?

A 24px icon inside a 40px mat-icon-button by default ends up with 9px top padding and 7px top padding due to baseline-driven CSS layout.

Screenshot (red outlines and highlight to demonstrate the problem):

What are the steps to reproduce?

Any basic mat-icon-button example has this problem, but I’ve forked and simplified an official example to make it easier to see: https://stackblitz.com/edit/angular-3mdmnc

Is there anything else we should know?

This is one possible fix:

/* Coerce the <span> icon container away from display:inline */
.mat-icon-button .mat-button-wrapper {
  display: flex;
  justify-content: center;
}

Issue Analytics

State:
Created 6 years ago
Reactions:103
Comments:21 (8 by maintainers)

Top GitHub Comments

35reactions

driimacommented, Apr 27, 2019

Any news on this? It’s been an issue for well over a year now.

20reactions

rynopcommented, Jan 25, 2019

The way I do it 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 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;
}