angular / angular/components

bug(COMPONENT): Font Awesome Icons have styling problems when a mat-button is on the page

Abierto
#32,338 1 comentario 0 reacciones 0 asignados Ver en GitHub
area: material/button P2
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

19.2.8

### Description

Material buttons cause styling for mat-icon-buttons containing font awesome icons in safari and chrome

### Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-ga6nsxqe?file=src%2Fmain.ts,angular.json,src%2Fglobal_styles.css
Steps to reproduce:
1. Clicking any of the red icon buttons will toggle a variable that controls whether the mat-button is in the DOM. To view the problem make sure the button is toggled visible.

### Expected Behavior

Icons will remain the same size and stay visible weather there is a material button in the DOM or not

### Actual Behavior

In Chrome: Some of the taller font awesome icons will be extra tall when a button is in the DOM and be the correct size when there are no buttons in the DOM. Forcing sizes with css classes or direct styles does not impact the height of the icon when the material button is in the DOM. Note that fa-building and fa-play are two examples of taller font awesome icons while fa-toolbox is normal size. In Chrome fa-toolbox behaves how it should when the material button is in the DOM.

Here is what it looks like when the button is toggled into the DOM in chrome:
Image

Here is what it looks like when the button is toggled out of the DOM in chrome:

Image

In Safari: All of the font awesome icons disappear entirely when the button is in the DOM

Here is what it looks like when the button is toggled into the DOM in safari:

Image

Here is what it looks like when the button is toggled out of the DOM in safari

Image

Note the fourth icon is visible in safari, this is a normal home icon from material icons and I included it for reference. The other three (fa-building, fa-play, and fa-toolbox) are all font awesome icons

### Environment

Angular CLI: 20.3.10
Node: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64

Angular: 20.3.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package Version
---------------------------------------
@angular-devkit/architect 0.2003.10
@angular-devkit/build-angular 20.3.10
@angular-devkit/core 20.3.10
@angular-devkit/schematics 20.3.10
@angular/cdk 20.2.13
@angular/cli 20.3.10
@angular/material 20.2.13
@schematics/angular 20.3.10
rxjs 7.8.2
typescript 5.8.3

Browsers: Chrome and Safari

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz, especialmente con src/main.ts, angular.json y src/global_styles.css. Alterna el mat-button en Chrome y Safari y compara los iconos de Font Awesome con el icono de inicio de material. Se considera terminado cuando los iconos mantienen su tamaño esperado y siguen visibles en ambos navegadores, tanto si el botón de material está presente como si no.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.