md-list-icon or md-button aligned to right? (Angular Material 2)

Question

Any way how to make buttons/icons/checkboxes aligned to the right like in Material 1:

https://material.angularjs.org/latest/demo/list

I currently (Material 2) have:

<md-list>
  <md-list-item *ngFor="let position of cart">
    <h3 md-line> {{ position.name }} </h3>
    <p md-line>
      <span> Line 1 </span>
    </p>
    <md-icon md-list-icon>delete</md-icon>
  </md-list-item>
</md-list>

Answer 1

For what is described above the solution is pretty simple, simply omit mat-list-icon in your selector and Material will do the magic:

<mat-list>
  <mat-list-item *ngFor="let position of cart">
    <h3 mat-line> {{ position.name }} </h3>
    <p mat-line>
      <span> Line 1 </span>
    </p>
    <div> $2.00 </div>
    <button mat-icon-button (click)="remove(1)">
      <mat-icon class="mat-24">delete</mat-icon>
    </button>
  </mat-list-item>
</mat-list>

Answer 2

Actually, mat-list uses flex box. You can individually order the item using the CSS property 'order'. Just use a large enough number for the order

md-icon[md-list-icon]{
  order: 10;
}

<md-list>
  <md-list-item *ngFor="let position of cart">
    <h3 md-line> {{ position.name }} </h3>
    <p md-line>
      <span> Line 1 </span>
    </p>
    <md-icon md-list-icon>delete</md-icon>
  </md-list-item>
</md-list>

Answer 3

If anyone like me had this same problem and the suggested solutions didn't work out try this:

.icon-class {
    margin-left: auto;
}

<mat-list>
   <mat-list-item>
      {{"Im just a filler"}}
      <mat-icon class="icon-class">
          fiber_manual_record
      </mat-icon>
      <mat-divider></mat-divider>
    </mat-list-item>
<mat-list>

It worked for me, and when it did I got mad at myself for not figuring it out before