How to add close icon button to mat-basic-chip in Angular Material?

Question

I created a custom styled chips list with mat-basic-chip (Unstyled chips) as per official docs

My Chips look like

Now, I want to add close buttons to my chips as default mat-chips have

Here is the template of mat-basic-chip

<mat-basic-chip *ngFor="let signal of signals">
                    <div matLine class="text-center">{{signal .name}}</div>
                    <div matLine class="mt-sm-n1 text-center"><small>(Default)</small></div>
</mat-basic-chip>

As per the official docs receives the mat-basic-chip CSS class in addition to the mat-chip class. So, here is the CSS of .mat-basic-chip to style my custom chips:

.mat-basic-chip {
  display: inline-block;
  clear: right;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 1vh;
  padding: .7vh 0vh .7vh .7vh;
  margin-right: 2vh;
  margin-top:1vh;
  min-width: 15vh;
 }

Answer 1

You can click the view source button in the offial docs to se how they have done it. They add a mat-icon in the chip like this:

<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
         [removable]="removable" (removed)="remove(fruit)">
  {{fruit.name}}
  <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>

You don't need to reinvent the wheel here and write your own icon for the remove button, it's already been done.

Take a closer look in the offical docs and press the view source button.

Good luck!

Answer 2

How to add a remove button to the mat-basic chip

You can use the normal chip mat-chip with all your customizations like in the picture without changing any css.

I took the basic example of the mat-chip fruits. There is changed it to the following:

<mat-chip
  *ngFor="let fruit of fruits"
  [selectable]="selectable"
  [removable]="removable"
  (removed)="remove(fruit)">
  <div>
    <div matLine>{{fruit}}</div>
    <div matLine><small>(Default)</small></div>
  </div>
  <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>

Modified example: https://stackblitz.com/angular/mjygopomxvq

Customize your mat-chip

This method is officially supported and recommended. For more information look at

• https://material.angular.io/guide/theming and
• https://material.angular.io/guide/theming-your-components

Using that you can add the color property to make customizations for different states. For that modify the .mat-chip.mat-custom class whereas the mat-custom can be anything. Just the mat-... has to be the same.

SCSS

.mat-chip.mat-primary {
    background-color: blue;
    color: white;
}

.mat-chip.mat-accent {
    background-color: yellow;
    color: black;
}

/* Your implementation from the description */

.mat-chip.mat-anything {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 1vh;
    padding: .7vh 0vh .7vh .7vh;
    margin-right: 2vh;
    margin-top:1vh;
}

HTML

<mat-chip-list>
  <mat-chip color="primary" selected>Primary</mat-chip>
  <mat-chip color="accent" selected>Accent</mat-chip>
  <mat-chip color="anything" selected>
    <div>
      <div matLine>Anything</div>
      <div matLine><small>(Default)</small></div>
    </div>
    <mat-icon matChipRemove>cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

DEMO for your reference: https://stackblitz.com/edit/angular-v5xq8y

Feel free to leave some feedback.