CODEWITHSUNDEEP
angularangular-material
Joshua Kemmerer
Joshua Kemmerer

Reputation: 1673

How do I move an icon to the left of a navigation list in Angular Material

I am trying to move an icon in a Angular (NOT -JS) Material Design navigation list to the left of the list.

I have two snippets:

  1. The first one looks much better than the second snippet, but I cannot figure out how to get the 'group' md-icon on the left of the title and description, even though it appears first in the list item. I could do { position: absolute; left: 0px}, but I hate hacks like that and would like to avoid it, if possible (not sure why it would default to appear on the right even though it appears first in the list...). Better version of Angular Material Navigation List
  2. The second one looks terrible, but it has the 'group' md-icon somewhat to the left of the title and description.

Worse version of Angular Material Nav List

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

How can I have the nice look of the navigation list with an icon on the left of the title and description?

Upvotes: 2

Views: 2343

Answers (1)

Sonicd300
Sonicd300

Reputation: 2049

I did it by adding the mdListIcon attribute to the md-icon:

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

Upvotes: 2

Related Questions