Description
Description
When using Tailwind, its Preflight reset applies rules like letter-spacing: inherit to form controls (including buttons). That override breaks Angular Material’s default for <mat-icon>, which is display: inline-block. As a result, any <mat-icon> inside a <mat-icon-button> ends up off-center (because inline-block plus Tailwind’s inherited letter-spacing shifts it). This issue only occurs when Tailwind is loaded—if you run a bare Material setup without Tailwind, the icon stays perfectly centered.
In this GIF, you can see:
- Default (with Tailwind +
display: inline-block) → icon is off-center - Modified (
display: block) → icon is correctly centered
Workaround
You can fix it globally by adding this to your CSS:
.mdc-icon-button .mat-icon {
display: block;
}Suggested Change
Since an icon inside a mat-icon-button doesn’t actually need inline-block, it would be helpful if the default were changed to display: block. That way, icons remain centered even when Tailwind (or any similar CSS reset) is used.
Side Note
The official docs still show matIconButton in code examples, but in your HTML it must be written as mat-icon-button. I copy-pasted it and was confused for a moment 😅.
Reproduction
https://stackblitz.com/edit/components-issue-starter-aksf9tvg?file=src%2Fmain.ts
Expected Behavior
Icons inside mat-icon-button should be perfectly centered by default, even when Tailwind is loaded.
Actual Behavior
When Tailwind is used, its Preflight reset applies letter-spacing: inherit to buttons. This overrides Angular Material’s default display: inline-block for <mat-icon>, causing the icon to appear off-center inside mat-icon-button.
Environment
Angular CLI: 19.1.9
Node: 22.14.0
Package Manager: pnpm 10.5.2
OS: win32 x64
Angular: 19.1.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1901.9
@angular-devkit/build-angular 19.1.5
@angular-devkit/core 19.1.5
@angular-devkit/schematics 19.1.5
@angular/cdk 19.1.2
@angular/cli 19.1.9
@angular/fire 19.2.0
@angular/material 19.1.2
@angular/ssr 19.1.5
@schematics/angular 19.1.5
ng-packagr 19.1.2
rxjs 7.8.1
typescript 5.7.3
zone.js 0.15.0