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 {}

Usage

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

<igx-icon color="magenta">home</igx-icon>

Setting an inactive icon.

<igx-icon [isActive]="false">volume_off</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 color="#0375be" class="custom-size">phone_iphone</igx-icon>

<!-- icon-sample2.component.scss -->

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

SVG Icons

You can also use a SVG image as an icon. First, inject IgxIconService dependency. In this example IgxIconService dependency is injected in a component's constructor but you can use it wherever it is needed in your code.

Use the addSvgIcon method to import the SVG file in cache. When the SVG is cached, it can be used anywhere in the application. Icon name and file URL path are method's mandatory parameters; you can specify font-set as well. After that, you can use the SVG files in the HTML markup. Alternatively, you can use the addSvgIconFromText method to import the SVG file providing the SVG text content instead of the file URL.

  • Have in mind that if there are two icons with the same name and the same font-set - SVG icon will be displayed with priority.
  • It is better not to provide image width and height in the SVG file.
  • You may need additional polyfill scripts ("polyfills") for Internet Explorer.
// svg-icon-sample.ts

constructor(private iconService: IgxIconService) { }

public ngOnInit() {
    // register custom SVG icons
    this.iconService.addSvgIcon("contains", "/assets/images/svg/contains.svg", "filter-icons");
}

<!-- svg-icon-sample.html -->

<igx-icon name="contains" fontSet="filter-icons"></igx-icon>

Breaking Changes in 6.2.0

  • The IgxIconComponent iconName property is deprecated. To set the icon name for 'material' icons, place the name of the icon between the opening and closing tags. For 'Font Awesome' and SVG icons, use the name property.

API References

Additional Resources

Our community is active and always welcoming to new ideas.