##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 style.color.

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

    Setting an inactive icon.

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

    Setting icon with content projection.

    <igx-icon [style.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 [style.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 icon-theme and accepts the parameters, required to customize the icon as desired.

    $custom-theme: 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: 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:icon-theme(
    $color: color($custom-palette, "secondary", 600),
    $disabled-color: 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: 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 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 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.