Angular Material mat-nav-list multiline with centered icon

Question

I am struggling with trying to setup a mat-nav-list with some -based mat-list-items with two lines. First line should be an image with horizontal center and second line a caption text also centered. Both I got displayed, but the img/icon does not centered. :/

Here is some code:

<mat-nav-list class="list-container">
    <a mat-list-item routerLink="/somewhere" routerLinkActive="active-link">
      <span matLine class="icn_log"></span>
      <span matLine>Centered Text</span>
    </a> 
</mat-nav-list>

I used some styles too, more for getting the paddings off and add some border. But how I can give the first span with the icon the command to get centered too?:

.list-container {
   width: 100%;
   padding-top: 1px;
   border-right: 1px solid;
   border-color: #ddd;
   text-align: center;
}

.list-container .mat-list-item {
   border: 1px solid;
   border-right: 0px;
   border-color: #ddd;
   margin-top: -1px;
   height: 80px;  
}

.list-container .mat-list-item .mat-line {
   padding-top: 5px;
   padding-bottom: 5px;
}

.icn_log {
   height: 32px;
   width: 32px;
   background-repeat: no-repeat;
   background-image: url("assets/img/log.png");
   background-position: 0;
}

Some code to play: https://stackblitz.com/edit/angular-94jjyp

Answer 1

Try using the mat-icon directive like so:

<mat-list>
    <a mat-list-item>
        <mat-icon></mat-icon>
        <span matLine>Centered Text</span>
    </a>
</mat-list>

Within the mat-icon you can use the https://material.io/tools/icons. If you are new to material icons you can follow this guide: https://google.github.io/material-design-icons/.

Answer 2

EDIT -

Try changing your background position from 0 to center for icn_log and width to 100%

.icn_log {
    width: 100%;
    background-position: center;
}

Answer 3

There is a work around for time being but its going to be deprecated, details here

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

 :host ::ng-deep .mat-list-item-content {
  flex-direction: column !important;
}

Answer 4

Try:

<mat-nav-list class="list-container">
<a mat-list-item routerLink="/somewhere" routerLinkActive="active-link">
  <center>
   <span matLine class="icn_log"></span>
   <span matLine>Centered Text</span>
  </center>
</a>