angular / angular/components

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

Đang mở
#31,304 3 bình luận 6 reaction 0 người được giao Xem trên GitHub
area: material/button area: material/icon needs: discussion P4
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

![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
```

Hướng dẫn đóng góp

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.