Angular 材料：如何在`mat-card-header`中使用`mat-icon`作為`mat-card-avatar`？

Question

通過mat-card-avatar很好地支持在mat-card-header中提供圖像頭像。

在許多用例中，我們希望使用圖標而不是圖像作為卡片的“頭像”。

有沒有一種簡單的方法可以用圖標替換頭像？

這下面的作品，但不如頭像圖像那么好。

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

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