Material Icons are not centered vertically to parent

[woteska]

Reproduction

https://stackblitz.com/edit/angular-tzta8m

You will see that mat-icon is not centered vertically in button element.

Expected Behavior

Should be centered vertically, too.

Actual Behavior

Not centered, not so fancy.

Environment

• Angular, CDK/Material from Stackblitz:

    "@angular/animations": "^8.2.9",
    "@angular/cdk": "~8.2.2",
    "@angular/common": "^8.2.9",
    "@angular/compiler": "^8.2.9",
    "@angular/core": "^8.2.9",
    "@angular/forms": "^8.2.9",
    "@angular/material": "~8.2.2",
    "@angular/material-moment-adapter": "~8.2.2",
    "@angular/platform-browser": "^8.2.9",
    "@angular/platform-browser-dynamic": "^8.2.9",
    "@angular/router": "^8.2.9",
    "hammerjs": "^2.0.8",
    "@angular-devkit/build-angular": "^0.803.8",
    "@angular/cli": "^8.3.8",
    "@angular/compiler-cli": "^8.2.9",
    "@angular/language-service": "^8.2.9",

• Browser(s): Chrome Version 79.0.3945.130 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Enterprise 1903

[jelbourn]

This probably isn't something we will touch in the current implementation. When we swap the current button implementation for the MDC-based implementation, it should conform to the spec.

[woteska]

@jelbourn that's pity 'cause it is bad for eyes unfortunately. Wrong with Roboto, but worse with Segoe UI. :'(

[jonaaix]

I also noticed this inaccuracy
The left one shows the default, right one with magin-top: -2px on the icon

You can also see the edge distances from the border are not balanced

<button mat-icon-button color="warn" style="border: 1px solid red; box-sizing: content-box">
  <mat-icon>settings</mat-icon>
</button>
<button mat-icon-button color="warn" style="border: 1px solid red; box-sizing: content-box;">
  <mat-icon style="margin-top: -2px;">settings</mat-icon>
</button>

Edit: For my perception, -3px should be even more accurate.

Edit 2:

Imho the most accurate fix, which also works well using other/custom icon components, is making the icon wrapper a flex container. This also works if we want to have an icon inside a regular button, then remove mat-icon-button from the selector.

// Fix: Center icon button
.mat-icon-button .mat-button-wrapper {
   display: inline-flex;
   justify-content: center;
   align-items: center;
}

[maknapp]

The MDC icon buttons still have this issue when using a instead of button tags with certain fonts (e.g. Segoe UI). Since this is a font thing, it may only be an issue on Windows.

.mdc-icon-button {
  // Either of these fix it for me
  line-height: 1; // Anything other than "normal"
  font-family: Arial;
}

[e-oz]

I don't use , I don't use Windows, but is still not centered.
16.2.0-next.4