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>

Styling

The igxIcon allows styling through the Ignite UI for Angular Theme Library. The icon's theme exposes a property that allows customization of the color of the component.

Importing global theme

To begin styling of the predefined icon layout, you need to import the index file, where all styling functions and mixins are located.

@import '~igniteui-angular/lib/core/styles/themes/index'

Defining custom theme

You can easily create a new theme, that extends the igx-icon-theme and accepts the parameters, required to customize the icon as desired.

$custom-theme: igx-icon-theme(
  $color: #ffcd0f,
  $disabled-color: #494949
);

Defining a custom color palette

In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the igx-palette and igx-color functions.
igx-palette generates a color palette, based on provided primary and secondary colors.

$black-color: #494949;
$yellow-color: #ffcd0f;

$custom-palette: igx-palette(
    $primary: $black-color,
    $secondary: $yellow-color
);

After the custom palette has been generated, the igx-color function can be used to obtain different varieties of the primary and the secondary colors.

$custom-theme: igx-icon-theme(
    $color: igx-color($custom-palette, "secondary", 600),
    $disabled-color: igx-color($custom-palette, "primary", 500)
);

Defining custom schemas

You can go even further and build flexible structure that has all the benefits of a schema. The schema is the recipe of a theme.
Extend one of the two predefined schemas, that are provided for every component. In our case, we would use $_dark_icon.

$custom-icon-schema: extend($_dark-icon, (
    color: (igx-color("secondary", 500)),
    disabled-color: (igx-color("primary", 500))
));

In order for the custom schema to be applied, either light, or dark globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.

$my-custom-schema: extend($dark-schema, (
    igx-icon: $custom-icon-schema
));

$custom-theme: igx-icon-theme(
    $palette: $custom-palette,
    $schema: $my-custom-schema
);

Applying the custom theme

The easiest way to apply your theme is with a sass @include statement in the global styles file:

@include igx-icon($custom-theme);

Scoped component theme

In order for the custom theme to affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the index file).

This way, due to Angular's ViewEncapsulation, your styles will be applied only to your custom component.

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep in order to style the grid.

Note

Wrap the statement inside of a :host selector to prevent your styles from affecting elements outside of our component:

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

Demo


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.