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

Question

I am having trouble getting my anchor text and icon to look centered with Material 15.1.2

My layout looks like this:

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

The final result looks like:

I think the newer version is using flex where before it was using block. It also seems that the icon is 24px but the enclosing box is slightly bigger at 31px.
Trying to move the text with padding forces the whole block up and I can't move the anchor text up.

Any ideas?

Answer 1

I used display:inline-flex; to center the text as in the code below (I have used bootstrap).

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