Class IgxIconComponent

Icon は、マークアップにマテリアル アイコンを含める方法を提供します。

Igx Module

IgxIconModule

Igx Theme

igx-icon-theme

Igx Keywords

icon, picture

Igx Group

表示

備考

Ignite UI Icon を使用すると、開発者はマテリアル デザイン アイコンをマークアップに直接簡単に含めることができます。アイコンはさまざまなアイコン ファミリをサポートしており、active プロパティを使用してアクティブまたは無効としてマークできます。 これにより、アイコンの外観が変更されます。

<igx-icon family="filter-icons" active="true">home</igx-icon>

実装

  • OnInit
  • OnDestroy

コンストラクター

プロパティ

active: boolean = true

Input

active プロパティの無効化を許可する @Input プロパティです。デフォルトでクラスが適用されます。

<igx-icon [active]="false">settings</igx-icon>
ariaHidden: boolean = true

これにより aria-hidden 属性を無効にできます。デフォルトでクラスが適用されます。

@ViewChild("MyIcon") public icon: IgxIconComponent;
constructor(private cdRef:ChangeDetectorRef) {}
ngAfterViewInit() {
this.icon.ariaHidden = false;
this.cdRef.detectChanges();
}
el: ElementRef<any>
family: string

Input

family の値を設定する @Input プロパティです。デフォルト値は、"material" です。

<igx-icon family="material">settings</igx-icon>
name: string

Input

アイコンの name の変更を許可する @Input プロパティです。

<igx-icon name="contains" family="filter-icons"></igx-icon>

アクセサー

  • get getSvg(): SafeHtml
  • 基になる SVG 画像を SafeHtml として返すアクセサーです。

    @ViewChild("MyIcon")
    public icon: IgxIconComponent;
    ngAfterViewInit() {
    let svg: SafeHtml = this.icon.getSvg;
    }

    返却 SafeHtml

  • get template(): TemplateRef<HTMLElement>
  • 明示的、svg、またはなしの合字を参照する TemplateRef を返すアクセサーです。

    @ViewChild("MyIcon")
    public icon: IgxIconComponent;
    ngAfterViewInit() {
    let iconTemplate = this.icon.template;
    }

    返却 TemplateRef<HTMLElement>