如何使用 Material 15.1.2 在 mat-nav-list 中将 mat-list-item 与 mat-icon 居中

Question

我无法让我的锚文本和图标看起来以 Material 15.1.2 为中心

我的布局如下所示：

<mat-sidenav-container>
  <mat-sidenav #sidenav role="navigation" [opened]="openSidenav">
    <mat-nav-list>
        <a mat-list-item routerLink="/signup">
          <mat-icon>face</mat-icon>
          <span matLine >Sign up</span>
        </a>

最终结果如下所示：

我认为较新的版本在使用 block 之前使用 flex。 图标似乎也为 24px，但封闭框稍大一些，为 31px。
尝试使用填充移动文本会强制整个块向上移动，我无法向上移动锚文本。

有任何想法吗？

Answer 1

我使用display:inline-flex; 按照下面的代码将文本居中（我使用了引导程序）。

<a mat-list-item routerLink="" >
    <div class="d-inline-flex">
        <mat-icon>face</mat-icon>
        <span matLine>Sign up</span>
    </div>
</a>