如何让Angular Material的mat-icon与mat-card-title文本正确对齐？

我希望home图标能与文本“The 20 Minute Rule”正确对齐。似乎很多人都有在标题中添加图标的需求，我原本以为这能开箱即用。

现有代码 #

<mat-card-header>
    <mat-card-subtitle>
        Rule # {{rule.id}}
    </mat-card-subtitle>
    <mat-card-title style="vertical-align: top;">
        <mat-icon style="border:1px solid red;" aria-hidden="false" aria-label="Example home icon"
            fontIcon="home"></mat-icon>
        <a style="border:1px solid red" *ngIf="showLink" routerLink="/rule/{{rule.id}}">{{rule.name}}</a>
    </mat-card-title>
</mat-card-header>

问题现象 #

截图显示home图标明显高于右侧的文本，两者垂直对齐不一致。

解决方法 #

以下几种方式可快速实现垂直对齐：

1. Flex布局（推荐）
   给mat-card-title添加Flex布局，让内部元素自动垂直居中：

<mat-card-title style="display: flex; align-items: center;">
    <mat-icon style="border:1px solid red;" aria-hidden="false" aria-label="Example home icon"
        fontIcon="home"></mat-icon>
    <a style="border:1px solid red" *ngIf="showLink" routerLink="/rule/{{rule.id}}">{{rule.name}}</a>
</mat-card-title>

Flex布局能适配不同字体大小、元素高度的场景，是处理对齐问题最通用的方案。

2. 设置图标垂直对齐属性
   直接给mat-icon添加vertical-align: middle，让图标与文本中线对齐：

<mat-icon style="border:1px solid red; vertical-align: middle;" aria-hidden="false" aria-label="Example home icon"
    fontIcon="home"></mat-icon>

该方式适合仅需调整单个图标对齐的场景。

3. 统一元素行高
   若文本与图标行高不一致导致错位，可给mat-card-title及内部元素设置统一行高：

<mat-card-title style="line-height: 24px;">
    <mat-icon style="border:1px solid red; line-height: 24px;" aria-hidden="false" aria-label="Example home icon"
        fontIcon="home"></mat-icon>
    <a style="border:1px solid red; line-height: 24px;" *ngIf="showLink" routerLink="/rule/{{rule.id}}">{{rule.name}}</a>
</mat-card-title>

需根据实际字体大小调整行高数值。

内容的提问来源于stack exchange，提问作者Maccurt