cssangularangular-materialangular-material-5

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

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.