CODEWITHSUNDEEP
cssangularangular-materialangular-material-5
indra257
indra257

Reputation: 86

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>

Upvotes: 4

Views: 11653

Answers (2)

Daniela Belc
Daniela Belc

Reputation: 1

Move the icon before the item ({{ item.name}}):

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

Upvotes: 0

k.s.
k.s.

Reputation: 3004

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.

Upvotes: 5

Related Questions