Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxIconComponent

Hierarchy

  • IgxIconComponent

Implements

  • OnInit

Constructors

Properties

Accessors

Constructors

constructor

Properties

active

active: boolean = true

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

<igx-icon [isActive]="false" fontSet="material" color="blue">settings</igx-icon>

ariaHidden

ariaHidden: boolean = true

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

@ViewChild("MyIcon") public icon: IgxIconComponent;
constructor(private cdRef:ChangeDetectorRef) {}
ngAfterViewInit() {
   this.icon.ariaHidden = false;
   this.cdRef.detectChanges();
}

cssClass

cssClass: string = "igx-icon"

This allows you to change the value of class.igx-icon. By default it's igx-icon.

@ViewChild("MyIcon") public icon: IgxIconComponent;
constructor(private cdRef:ChangeDetectorRef) {}
ngAfterViewInit() {
   this.icon.cssClass = "";
   this.cdRef.detectChanges();
}

el

el: ElementRef

An ElementRef property of the igx-icon component.

font

font: string

An @Input property that sets the value of the fontSet. By default it's "material".

<igx-icon fontSet="material" color="blue" [isActive]="false">settings</igx-icon>

iconColor

iconColor: string

An @Input property that allows you to change the iconColor of the icon.

<igx-icon color="blue" [isActive]="true" fontSet="material">settings</igx-icon>

iconName

iconName: string

An @Input property that allows you to set the iconName of the icon. The iconName can be set using the name property.

<igx-icon color="blue" [isActive]="true" fontSet="material">question_answer</igx-icon>

id

id: string = `igx-icon-${NEXT_ID++}`

An @Input property that sets the value of the id attribute.

<igx-icon id="igx-icon-1" fontSet="material" color="blue" [isActive]="false">settings</igx-icon>

Accessors

getActive

  • get getActive(): boolean

  • An accessor that returns the value of the active property.

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

    Returns boolean

getFontSet

  • get getFontSet(): string

  • An accessor that returns the value of the font property.

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

    Returns string

getIconColor

  • get getIconColor(): string

  • An accessor that returns the opposite value of the iconColor property.

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

    Returns string

getIconName

  • get getIconName(): string

  • An accessor that returns the value of the iconName property.

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

    Returns string

getInactive

  • get getInactive(): boolean

  • An accessor that returns inactive property.

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

    Returns boolean

getSvgKey

  • get getSvgKey(): string

  • An accessor that returns the key of the SVG image. The key consists of the fontSet and the iconName separated by underscore.

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

    Returns string

template

  • get template(): TemplateRef<HTMLElement>

  • An accessor that returns a TemplateRef to explicit, svg or no ligature.

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

    Returns TemplateRef<HTMLElement>