带居中图标的"角度材质"材质导航列表多行

Question

我很难用一些基于两行的垫子列表项来设置一个垫子导航列表。第一行应该是水平居中的图像，第二行应该是居中的标题文本。两者都显示了，但img/图标没有居中。：/

这里有一些代码：

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

我也使用了一些样式，更多的是为了去掉衬垫并添加一些边框。但是，我如何给带有图标的第一个跨度也设置居中的命令？：

.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;
}

一些要播放的代码：https://stackblitz.com/edit/angular-94jjyp

Answer 1

编辑-

尝试将icn_log的背景位置从0更改为center，将width更改为100%

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

Answer 2

尝试使用mat-icon指令，如：

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

在mat-icon中，您可以使用https://material.io/tools/icons.如果您是材质图标的新手，可以按照本指南操作：https://google.github.io/material-design-icons/.

Answer 3

暂时有一个变通办法，但它将被弃用，详细信息请点击

https://angular.io/guide/component-styles#deprecated-深度和ng深度

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

Answer 4

尝试：

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