[英]Angular Material Icons Displays Icon Name Before Icon Renders
[英]Material icon not detcted from name
尝试模拟此示例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);
}
}
}
我在这里创建了一个堆叠闪电战,我找不到他们的样本和我的样本之间的区别。
您需要在index.html文件中添加:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
并在style.css中添加一个主题,例如:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
它应该工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.