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>

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

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

Solution 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

Comments

[Cody Gray]

Umm, doesn't Angular still use CSS for customization? That would mean this is a simple float: right;

[srokatonie]

float:right is not working... After playing with it for a while I came up with a solution, I'll post it in a moment

[Martin Schneider]

you meant to omit md-list-icon!? ;)

[Jules]

That's a terrible solution. Note that if you're using multiple icons (like in the example image shown) the icons will end up in reverse order. Also, screen readers will likely read out the controls in the wrong order. Don't do this. dir="rtl" is designed for cases when the content will be interpreted as the item on the right being logically first, not for visually rearranging things.

[Saqib S]

I agree with Jules. This is not the right solution for this kind of problem.

[Miki]

@srokatonie mind to accept the answer? I had to scan all the other answers just in case.