如何在Angular Material的导航列表左侧移动图标

Question

我正在尝试将Angular（NOT -JS）Material Design导航列表中的图标移动到列表的左侧。

我有两个片段：

1. 第一个看起来比第二个片段要好得多，但我无法弄清楚如何在标题和说明的左侧获得“群组”md-icon，即使它首先出现在列表项中。我可以做{ position: absolute; left: 0px}，但我讨厌这样的黑客，并且如果可能的话就想避免它（不确定为什么它会默认出现在右边，即使它出现在列表的第一位......）。
2. 第二个看起来很糟糕，但它在标题和说明的左侧有一些“md-icon 。



<md-nav-list>
  <a md-list-item class="md-3-line" *ngFor="let group of groups$ | async" [routerLink]="[configuration.baseUrl + '/group', group.id]">
    <md-icon>group</md-icon>
    <h4 mdLine>{{group.name || 'Title'}}</h4>
    <p mdLine class="demo-2"> {{group.description || 'Description'}} </p>
    <button md-button>
      <md-icon>mode_edit</md-icon>
    </button>
    <button md-button>
      <md-icon>delete</md-icon>
    </button>
    <md-divider></md-divider>
  </a>
  <md-divider></md-divider>
</md-nav-list>

<md-list-item class="md-3-line" *ngFor="let group of groups$ | async">
    <a [routerLink]="[configuration.baseUrl + '/group', group.id]">
      <md-icon>group</md-icon>
      <h4 mdLine>{{group.name || 'Title'}}</h4>
      <p mdLine class="demo-2"> {{group.description || 'Description'}} </p>
    </a>
    <button md-button>
      <md-icon>mode_edit</md-icon>
    </button>
    <button md-button>
      <md-icon>delete</md-icon>
    </button>
    <md-divider></md-divider>
  </md-list-item>

如何在标题和说明的左侧显示导航列表的漂亮外观？

Answer 1

我是通过将mdListIcon属性添加到md-icon：

来实现的

<md-icon mdListIcon>group</md-icon>