bug(mat-icon-button & mat-icon): mat-icon misaligned in mat-icon-button when using Tailwind
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
```
コントリビューションガイド
調査の方向性
リンクされている StackBlitz の再現から始め、Angular Material の mat-icon と mat-icon-button のスタイルを Tailwind Preflight と併せて調査します。完了の条件は、Tailwind 使用時もアイコンが中央揃えのままであり、Tailwind なしでも既存の動作が正しいままであることです。この issue ではソースファイルも回帰テストも指定されていません。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, tailwindcss
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100