我正在尝试将Angular（NOT -JS）Material Design导航列表中的图标移动到列表的左侧 .
我有两个片段：
-
第一个看起来比第二个片段要好得多，但我无法弄清楚如何在 Headers 和描述的左侧获得'group'
md-icon，即使它首先出现在列表项中 . 我可以做{ position: absolute; left: 0px}，但是我讨厌这样的黑客并且想要避免它，如果可能的话（不知道为什么它会默认出现在右边，即使它出现在列表的第一位......） .
-
第二个看起来很糟糕，但它在 Headers 和描述的左边有一些'group'
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>
如何在 Headers 和说明左侧的图标左侧显示导航列表的漂亮外观？
1 回答
我是通过将
mdListIcon属性添加到md-icon来实现的：