angular - 如何将图标移至 Angular Material 中导航列表的左侧

Question

我正在尝试将 Angular(非 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>