angular / angular/components

bug(mat-icon-button & mat-icon): mat-icon misaligned in mat-icon-button when using Tailwind

Offen
#31,304 3 Kommentare 6 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/button area: material/icon needs: discussion P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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 ``, which is `display: inline-block`. As a result, any `` inside a `` 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

![Image](https://github.com/user-attachments/assets/31f85259-d479-4e2c-9753-3e3e98b80702)

---

**Workaround**
You can fix it globally by adding this to your CSS:

```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 ``, 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
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verlinkten StackBlitz-Reproduktion und untersuche die Angular Material-Stile von mat-icon und mat-icon-button im Zusammenspiel mit Tailwind Preflight. Als erledigt gilt die Aufgabe, wenn die Icons mit Tailwind zentriert bleiben und das bestehende Verhalten ohne Tailwind weiterhin korrekt ist; das Issue nennt keine Quelldatei oder keinen Regressionstest.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, tailwindcss
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.