angular / angular/components

bug(mat-button, mat-icon): mat-icon inside of mat-button are truncated

オープン
#30,763 コメント 5 件 リアクション 3 件 担当者 0 名 GitHub で見る
area: material/button P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### Is this a regression?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

Not sure which

### Description

Using Angular 19 with angular material, if I put a `mat-icon` element inside of a `mat-button`, the icon is not completely visible. It is truncated a little at its top and bottom. See reproduction StackBlitz below.

### Reproduction

Forked the "Button Angular Component" example to display the problem.

Editor: https://stackblitz.com/edit/3zsvfedr?file=src%2Fexample%2Fbutton-overview-example.html
Application: https://3zsvfedr.stackblitz.io

See the second button in the "Basic" "Raised" "Stroke" and "Flat" table rows.

### Expected Behavior

I would expect the icon to be fully visible, not truncated. In case of the `add_circle` icon, I would expect its shape to be perfectly round.

### Actual Behavior

The top and bottom of the icon are truncated (cropped) which makes it painfully _not round_.

![Image](https://github.com/user-attachments/assets/7b00a4b4-e485-43b1-8786-9d8315c6fabd)

### Environment

- Angular: 19
- CDK/Material: 19.2.7
- Browser(s): Edge, Chrome and Firefox
- Operating System: Windows

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされている StackBlitz の再現から始め、Basic、Raised、Stroke、Flat の各例の 2 番目のボタンを比較します。クリッピングに関係する Angular Material の mat-button と mat-icon のレンダリングおよびスタイリングを追跡します。アイコンが完全に表示され、報告されているブラウザー全体で add_circle アイコンが円形に表示されれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。