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?

Possible duplicate of this https://stackoverflow.com/questions/49657545/mat-icon-does-not-center-in-its-div/49658015 — Sain Pradeep, Jan 30 '23 at 06:07
No duplicate! Not if you are using angular 15. The solution in the 'duplicate' does not work - the css does not override material. At least I cannot get css to do anything that material 15 list crap decides it wants to do. — Brian Reinhold, Apr 18 '23 at 21:34

score 0 · Answer 1 · edited Jan 31 '23 at 18:57

0

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>

edited Jan 31 '23 at 18:57

tdy

36,675
19
86
83

answered Jan 30 '23 at 06:03

Smarpan Sharma

21
4

score 0 · Answer 2 · edited May 16 '23 at 03:02

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>

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

2 Answers2