Icon Component - Native Angular | Ignite UI for Angular

Icon

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

Dependencies

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/main';

@NgModule({
    imports: [
        ...
        IgxIconModule,
        ...
    ]
})
export class AppModule {}

Examples

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>

API Summary

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

Atributes

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).
`animate`	`color="#474747"`	Set the icon color by providing a string value.

Setters

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.

Getters

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.