Para lo que se describe arriba, la solución es bastante simple, simplemente omita mat-list-icon en su selector y Material hará la magia:

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

En realidad, mat-list usa flex box. Puede ordenar individualmente el artículo usando la propiedad CSS 'pedir'. Solo use un número lo suficientemente grande para el pedido

 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>

Si alguien como yo tuvo el mismo problema y las soluciones sugeridas no funcionaron, intente esto:

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

Funcionó para mí, y cuando lo hizo, me enojé conmigo mismo por no haberlo descubierto antes.