Angular Material：如何在“mat-card-header”中使用“mat-icon”作为“mat-card-avatar”？答案

【问题标题】：Angular Material: How to use `mat-icon` as `mat-card-avatar` within `mat-card-header`?Angular Material：如何在“mat-card-header”中使用“mat-icon”作为“mat-card-avatar”？
【发布时间】：2019-11-11 19:16:47
【问题描述】：

通过mat-card-avatar 很好地支持在mat-card-header 中提供图像头像。

在许多用例中，我们希望使用图标而不是图像作为卡片的“头像”。

有没有一种简单的方法可以用图标替换头像？

下面这样的作品，但不如头像图像那么好。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

mat-card-avatar 指令可以应用于任何元素，包括<mat-icon>。您需要对图标应用样式才能获得正确的大小：

<mat-card>
  <mat-card-header>
    <mat-icon mat-card-avatar>home</mat-icon>
    ...

mat-icon.mat-card-avatar {
  width: 40px;
  height: 40px;
  font-size: 40px;
}

【讨论】：

我发现48px 工作得更好。它更适合16px 的默认 rem。
这当然是你的选择，但图标/头像的 Material Design 规范通常是 40px x 40px（例如卡片上的头像）。此外，mat-card-avatar 的样式代码将宽度和高度设置为 40 像素，因此使图标大于该值可能会导致问题，具体取决于您使用它的方式/位置。
你说得对，我忘了我在我的项目中改变了mat-card-title和mat-card-subtitle的高度。因此，即使是 rem 的倍数对我来说也更好。忽略我的评论...

【解决方案2】：

它们不会自动改变样式。我使用的一种方法是将其声明为并增加字体大小以匹配默认的 40 像素。

<mat-card class="example-card">
  <mat-card-header>
    <i mat-card-avatar class="material-icons">accessibility</i>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>
.....
</mat-card>

有了这个，你只需要指定 font-size:40px;

.example-card {
  max-width: 400px;

  & i {
    font-size: 40px;
  }
}

【讨论】：