angular / angular/components

Material Icons are not centered vertically to parent

未关闭
#18,401 5 条评论 6 个 reaction 已指派 0 人 在 GitHub 查看
area: material/button area: material/icon material spec P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

#### Reproduction

https://stackblitz.com/edit/angular-tzta8m

You will see that mat-icon is not centered vertically in button element.

#### Expected Behavior

Should be centered vertically, too.

#### Actual Behavior

Not centered, not so fancy.

#### Environment

- Angular, CDK/Material from Stackblitz:

```
"@angular/animations": "^8.2.9",
"@angular/cdk": "~8.2.2",
"@angular/common": "^8.2.9",
"@angular/compiler": "^8.2.9",
"@angular/core": "^8.2.9",
"@angular/forms": "^8.2.9",
"@angular/material": "~8.2.2",
"@angular/material-moment-adapter": "~8.2.2",
"@angular/platform-browser": "^8.2.9",
"@angular/platform-browser-dynamic": "^8.2.9",
"@angular/router": "^8.2.9",
"hammerjs": "^2.0.8",
"@angular-devkit/build-angular": "^0.803.8",
"@angular/cli": "^8.3.8",
"@angular/compiler-cli": "^8.2.9",
"@angular/language-service": "^8.2.9",
```

- Browser(s): Chrome Version 79.0.3945.130 (Official Build) (64-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Enterprise 1903

贡献指南

打开贡献指南

调研方向

从链接的 StackBlitz 复现开始,检查其中展示的 Angular Material button 和 mat-icon 行为。确认在所述 Angular 和 Material 版本中的垂直对齐问题;完成的标准是图标在其按钮内垂直居中,且不会破坏该复现。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
32/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。