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

@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.