未从名称中检测到材质图标

Question

试图模拟这个例子https://material.angular.io/components/icon/examples

这是我的组件代码：

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);
    }
  }
}

我在这里创建了一个堆栈闪电战，我找不到他们的样本和我的样本之间的区别。

Answer 1

您需要在 index.html 文件中添加：

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

并在 style.css 中添加一个主题，例如：

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

它应该工作。

这里修改后的代码