bug(mat-button): several issues with mat-icon inside mat-button
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 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
14
### Description
There are several issues when you are trying to use `mat-icon` inside `mat-button`.
Issue 1.
Button layout is not consistent if we are using `ng-container`, `mat-icon` is put in `.mdc-button__label` which leads to inconsistence in how styles are applied to an icon and text near it.
Of course `ng-container` as a structural component shouldn't have influence on how button is structured.
```
```
Issue 2.
Icon placed after text is appearing before text.
```
Label
```
### Reproduction
Steps to reproduce showing all 3 issues:
[Open that stackblitz](https://stackblitz.com/edit/angular-tyswc6?file=src/app/icon-overview-example.html)
### Expected Behavior
Issue 1.
`mat-icon` or any other custom content should be either inside or outside `.mdc-button__label` no matter what structural directives are used
Issue 2.
`mat-icon` should be at the same position relative to the text as it is in code
### Actual Behavior
Issue 1.
`mat-icon` is inside `.mdc-button__label` if inside `ng-container` in code and outside - if not
Issue 2.
`mat-icon` do not preserve an order implemented in code
### Environment
- Angular: 15.1.1
- CDK/Material: 15.1.1
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any
贡献指南
调研方向
打开链接的 StackBlitz 复现,并比较 Angular Material 15.1.1 中 mat-button/mat-icon 的行为,包括 ng-container 内部以及文本之后的图标。完成的标准是自定义内容具有一致的放置位置,并且 mat-icon 保留 template 中写入的顺序。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100