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

[object Object]

Example

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

Constructors

Section titled "Constructors"

IgxIconComponent

new IgxIconComponent(): IgxIconComponent

Defined in projects/igniteui-angular/icon/src/icon/icon.component.ts:118

Returns IgxIconComponent

Properties

Section titled "Properties"

active

Section titled "active"

An

 
active: boolean = true

Defined in projects/igniteui-angular/icon/src/icon/icon.component.ts:116

Example

<igx-icon [active]="false">settings</igx-icon>

ariaHidden

Section titled "ariaHidden"

The aria-hidden attribute of the icon. By default is set to 'true'.

 
ariaHidden: boolean = true

Defined in projects/igniteui-angular/icon/src/icon/icon.component.ts:83

el

Section titled "el" 
el: ElementRef<any>

Defined in projects/igniteui-angular/icon/src/icon/icon.component.ts:35

family

Section titled "family"

An

 
family: string

Defined in projects/igniteui-angular/icon/src/icon/icon.component.ts:94

Example

<igx-icon family="material">settings</igx-icon>

name

Section titled "name"

Set the name of the icon.

 
name: string

Defined in projects/igniteui-angular/icon/src/icon/icon.component.ts:105

Example

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

Accessors

Section titled "Accessors"

getActive

Section titled "getActive"

An accessor that returns the value of the active property.

get getActive(): boolean

Defined in projects/igniteui-angular/icon/src/icon/icon.component.ts:193

Example

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

Returns boolean

getFamily

Section titled "getFamily"

An accessor that returns the value of the family property.

get getFamily(): string

Defined in projects/igniteui-angular/icon/src/icon/icon.component.ts:177

Example

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

Returns string

getInactive

Section titled "getInactive"

An accessor that returns inactive property.

get getInactive(): boolean

Defined in projects/igniteui-angular/icon/src/icon/icon.component.ts:73

Example

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

Returns boolean

getName

Section titled "getName"

An accessor that returns the value of the iconName property.

get getName(): string

Defined in projects/igniteui-angular/icon/src/icon/icon.component.ts:209

Example

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

Returns string

getSvg

Section titled "getSvg"

An accessor that returns the underlying SVG image as SafeHtml.

get getSvg(): SafeHtml

Defined in projects/igniteui-angular/icon/src/icon/icon.component.ts:225

Example

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

Returns SafeHtml