how to center mat-list-item with mat-icon in mat-nav-list with Material 15.1.2

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>

Answer 2

You can add a css class like

.center-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
}

And use that class in anchor element

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