如何在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>