matChip with cancel icon can't be removed and displays differently

Question

Actual: the chip can't be removed Expected: chip can be removed once you click x

I have done the following actions:

1. Imported MatIconModule and MatChipsModule in the main app.module. The module with my codes is a Child module/lazy loading. I need to import MatIconModule also in the Child component for the icon to work.

import { MatChipsModule } from '@angular/material/chips';

2. Added the following in index.html

link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"

3. Added the ff in style.css and updated angular.json file.

@import "@angular/material/prebuilt-themes/indigo-pink.css";

"styles": [ "src/assets/css/style.css"] //angular.json

4. Installed hammer

Answer 1

This works for me ..

1. Install Angular Material Correctly https://material.angular.io/guide/getting-started

2. Import Font Family in styles.css

   @import url("https://fonts.googleapis.com/icon?family=Material+Icons");

3. This Code Will Do the rest

    <mat-chip-list>
      <mat-chip  (removed)="remove(event)"
        (click)="selected(event)">
         <i matChipRemove class="fa fa-times-circle"></i>
      </mat-chip>