Material icon not detcted from name

Question

trying to simulate this example https://material.angular.io/components/icon/examples

Here is my conponent code:

import { Component, Input } from '@angular/core';

import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material';
import { MatFormFieldControl } from '@angular/material';
import { MatChipInputEvent } from '@angular/material';
import { ENTER, COMMA } from '@angular/cdk/keycodes';

@Component({
  selector: 'hello',
  template: `

      <mat-form-field class="demo-chip-list">
        <mat-chip-list #chipList>
          <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
                  [removable]="removable" (remove)="remove(fruit)">
            {{fruit.name}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
          <input placeholder="New fruit..."
                [matChipInputFor]="chipList"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add($event)" />
        </mat-chip-list>
      </mat-form-field>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;

  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;

  // Enter, comma
  separatorKeysCodes = [ENTER, COMMA];

  fruits = [
    { name: 'Lemon' },
    { name: 'Lime' },
    { name: 'Apple' },
  ];


  add(event: MatChipInputEvent): void {
    let input = event.input;
    let value = event.value;

    // Add our fruit
    if ((value || '').trim()) {
      this.fruits.push({ name: value.trim() });
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }
  }

  remove(fruit: any): void {
    let index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }
}

I created a stackblitz here , I can't find difference between their sample and mine.

Answer 1

You need to add In your index.html file:

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

And add a theme in the style.css, like:

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

and it should work.

Here the modified code