angular / angular/components

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

Ouverte
#30,763 5 commentaires 3 réactions 0 personnes assignées Voir sur GitHub
area: material/button P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### 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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et comparez les deuxièmes boutons des exemples Basic, Raised, Stroke et Flat. Suivez le rendu et le style de Angular Material mat-button et mat-icon impliqués dans le rognage. Le travail est terminé lorsque l’icône est entièrement visible et que l’icône add_circle apparaît ronde dans les navigateurs signalés.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.