Icon

    The Ignite UI for Angular Icon component unifies icon/font families so developers can use them interchangeably and add material icons to markup.

    Angular Icon Example

    Usage

    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';
// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

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

    Examples

    Icon Color

    Use style.color CSS property to change its default color:

    <igx-icon [style.color]="'#e41c77'">home</igx-icon>

    Inactive Icon

    If you want to disable an icon, you can use the active property:

    <igx-icon [active]="false">volume_off</igx-icon>

    Content Projection

    You can set icons with content projection:

    <igx-icon>bluetooth</igx-icon>

    Icon Size

    You can customize the icons using CSS. The icon's size can be changed through the font-size property. Additionally to center it, set equal values to the width and height properties:

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

    SVG Icons

    You can also use an SVG image as an icon. First, inject the IgxIconService dependency. In this example we will inject it 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. The icon name and file URL path are the method's mandatory parameters; family can be specified as well. After that, you can use the SVG files in the HTML markup. Alternatively, you can use the addSvgIconFromText method to import an 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 family, the 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.
    constructor(private iconService: IgxIconService) { }

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

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

    Server-side Rendering Note

    In case you have implemented server side rendering logic in your application using Angular Universal and have used the IgxIconService to register icons, this may cause the following exception:

    XMLHttpRequest is not defined. Could not fetch SVG from url.

    In order to avoid this, execute the listed steps:

    1. Install xmlhttprequest:

      npm i xmlhttprequest

    2. On the top of your server.ts file, add: 

      (global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

    Styling

    To get started with styling the icons, we need to import the index file, where all the theme functions and component mixins live:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Following the simplest approach, we create a new theme that extends the icon-theme and accepts the parameters, required to customize the icon as desired. 

    $custom-icon-theme: icon-theme(
  $color: #1481b8,
  $disabled-color: #494949
);

    Using CSS variables

    The last step is to pass the custom icon theme in our application: 

     @include css-vars($custom-icon-theme);

    Using Theme Overrides

    In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables.

    If the component is using the Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep. To prevent the custom theme to leak into other components, be sure to include the :host selector before ::ng-deep:

    :host {
     ::ng-deep {
        @include icon($custom-icon-theme);
    }
}

    Demo

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.