The Ignite UI for Angular Icon component unifies icon/font sets so developers can use them interchangeably and add material icons to markup. The component supports custom colors. Icons can be set as inactive.

Icon Demo


The Icon component is exported as an NgModule, thus all you need to do in your application is to import the IgxIconModule inside your AppModule:

// app.module.ts

import { IgxIconModule } from 'igniteui-angular';

    imports: [
export class AppModule {}


Using igx-icon to set an active home icon with magenta color.

<igx-icon name="home" color="magenta" isActive="true"></igx-icon>

Setting an inactive icon.

<igx-icon name="volume_off" isActive="false"></igx-icon>

Setting icon with content projection.

<igx-icon color="red">bluetooth</igx-icon>

API Summary

In this article we covered the Icon component. Here are a few more APIs to explore, which are listed below.


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

Name Example Description
name name="home" Set the icon by providing its name from the official material icons set .
active isActive="true" Set the icon to active/inactive (default is true).
color color="#474747" Set the icon color by providing a string value.


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

Name Type Description
color(color: string) string Sets the icon color
name(icon: string) string Sets the icon name
isActive(state: boolean) boolean Sets the icon style to inactive if set to false.


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

Name Type Description
getIconColor() string Returns the icon color
getIconName() string Returns the icon name.
getActive() boolean Returns the icon active state.

Additional Resources

Our community is active and always welcoming to new ideas.