角材料：如何在“ mat-card-header”中使用“ mat-icon”作为“ mat-card-avatar”？

Question

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

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

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

这是下面的一种工作方式，但不如头像图像好。

Answer 1

col2指令可以应用于包括mat-card-avatar在内的任何元素。您需要将样式应用于图标以获取正确的大小：

<mat-icon>

Answer 2

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

<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;
  }
}