bug(mat-icon-button & mat-icon): mat-icon misaligned in mat-icon-button when using Tailwind
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
### 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
```
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện StackBlitz được liên kết và kiểm tra các style mat-icon và mat-icon-button của Angular Material cùng với Tailwind Preflight. Được xem là hoàn tất khi các biểu tượng vẫn được căn giữa với Tailwind, trong khi hành vi hiện tại vẫn đúng khi không có nó; issue không nêu tên tệp nguồn hoặc bài kiểm thử hồi quy.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, tailwindcss
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100