bug(mat-icon-button & mat-icon): mat-icon misaligned in mat-icon-button when using Tailwind
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
### 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

---
**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
```
Guía de contribución
Línea de trabajo
Comienza con la reproducción vinculada en StackBlitz e inspecciona los estilos de mat-icon y mat-icon-button de Angular Material junto con Tailwind Preflight. Se considera terminado cuando los iconos permanecen centrados con Tailwind mientras que el comportamiento existente sigue siendo correcto sin él; el issue no indica ningún archivo fuente ni ninguna prueba de regresión.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, tailwindcss
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 45/100