Angular material: displaying icons to the right of mat-chip

Issue

I have a mat-chip and have content in it. Also I have a cancel icon in it.
I set the mat-chip a fixed width, so I want the cancel icon to always float to the right.But the cancel icon is not floating to the right. I tried multiple css techniques but nothing worked.

<mat-chip *ngIf= "item?.name">
   {{ item.name}}
   <mat-icon matChipRemove (click)="removeAssignments(dataItem)">cancel</mat-icon>
</mat-chip>

Solution

Well mat-chip has display: inline-flex as a property, so you need to manipulate the child elements using flex related properties. For your case:

mat-chip {
  justify-content: space-between;
}

will do the trick. consider this guide into flexbox if you want to fully experience angular material, as there are a lot of things that are using it.

Answered By – k.s.

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0