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

@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" ></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>

You can set the icon's size through CSS. Create a custom CSS class and name it custom-size. The icon's size is changed by the font-size property. Additionally to center it, set the width and the height to the same value.

<igx-icon name="phone_iphone" color="#0375be" class="custom-size"></igx-icon>
<!-- icon-sample2.component.scss -->

.custom-size{
    font-size: 56px;
    width: 56px;
    height: 56px;
}

API Summary

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

Inputs

The following inputs are available on the igx-icon component:

Name Type Description
name string Set the icon by providing its name from the official material icons set .
iconName string Set the glyphName of the icon. You can provide either ligature name or glyph iconName, but not both at the same time.
fontSet string Set the value of the fontSet. By default it's "material".
active boolean Set the icon to active/inactive state (default is true).
color string Set the icon color by providing a string value.

Getters

The following getters are available on the igx-icon component:

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

Additional Resources

Our community is active and always welcoming to new ideas.