igx-icon supports icon component that unifies various icon/font sets to allow their usage interchangeably.

With the igx-icon you can add material-icons and other font-based icon sets while also using custom SVG icons in your markup. A guide on how to get started can be found here

Usage

    <igx-icon family="material" name="home"></igx-icon>

You can set the family to family="material" to select the material icons set (default).

You can set the icon by providing its name from the official material icons set name="home".

You can set the icon to active/inactive by providing setting active to true or false (default is true).

You can access all properties of the icon component with the following attributes:

id

family

name

active

Setters You can programmatically set all of the icon properties with the following icon setters:

family(fontFamily: string) sets the icon family name(icon: string) sets the icon name active(state: boolean) sets the icon style to inactive if set the false

Getters You can programmatically get all of the icon properties with the following icon getters:

getFamily() returns the icon family. getName() returns the icon name. getActive() returns the icon's active state.