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:119

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:117

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:84

el

Section titled "el" 
el: ElementRef<any>

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

family

Section titled "family"

An

 
family: string

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

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:106

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:194

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:178

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:74

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:210

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:226

Example

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

Returns SafeHtml