Class IgxIconComponent

Icon provides a way to include material icons to markup

Igx Module

IgxIconModule

Igx Theme

igx-icon-theme

Igx Keywords

icon, picture

Igx Group

Display

Remarks

The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons support different icon families and can be marked as active or disabled using the active property. This will change the appearance of the icon.

Example

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

Hierarchy

Hierarchy

  • IgxIconComponent

Implements

  • OnInit
  • OnDestroy

Constructors

Properties

active: boolean = true

An

Input

property that allows you to disable the active property. By default it's applied.

Example

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

This allows you to disable the aria-hidden attribute. By default it's applied.

Example

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

An

Input

property that sets the value of the family. By default it's "material".

Example

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

An

Input

property that allows you to set the name of the icon.

Example

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

Accessors

  • get template(): TemplateRef<HTMLElement>
  • An accessor that returns a TemplateRef to explicit, svg or no ligature.

    Example

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

    Returns TemplateRef<HTMLElement>