Angular Icon Settings

In real-world scenarios, the color, size, and type of icon used in the application need to be changed or dynamically updated at runtime. You can set the icon type to font or SVG icon in the root or feature module.

In this article, you will find more details about how to configure the built-in icons of the Kendo UI for Angular suite or replace them with custom ones.

Icons Configuration

You can configure the built-in icons used across all Kendo UI for Angular components by setting the following IconSettings properties:

• type—Determines whether the Icon or SVGIcon component will be used to visualize the icons.
• themeColor—Sets the color of the icons. The list of available colors can be seen in the Theme Color article.
• flip—Specifies the icon flip direction.
• size—Determines the size of the icons from extra small to extra large.

To set the icon settings globally, use the ICON_SETTINGS token and provide the IconSettings object as a value in the appropriate module.

Copy Code@NgModule({
    ...
    providers: [{ provide: ICON_SETTINGS, useValue: { type: 'svg', size: 'xsmall' } }]
})
export class AppModule {}

The following code snippet demonstrates how to provide the icon settings to the root module of the application.

Changing the Icon Settings Dynamically

If you need to switch between font and SVG icons or change any other IconSettings property dynamically, use the following approach:

1. Inject the IconSettingsService in the constructor.

   Copy Codeconstructor(public iconService: IconSettingsService){}

2. Call the notify method exposed by the service and provide the new IconSettings object as an argument.

   When switching the icon type, ensure that both icons (Font and SVG) are set for all affected components.

   Copy Codeexport class AppComponent {
       public iconSettings: IconSettings = {type: 'svg', size: 'large'};
   
       public changeIconSettings(): void{
           this.iconSettings = {type: 'font', size: 'medium'};;
           this.iconService.notify(this.iconSettings)
       }
   }

The following example demonstrates how to update the IconSettings dynamically.

Loading Custom Icons

To provide custom icons to the Kendo UI for Angular components and overwrite the default ones, create a custom service that extends the built-in IconSettingsService. Override the getSvgIcon and/or getCustomFontClass methods to return the desired SVGIcon or custom class(es) based on a key, provided as an argument.

To overwrite the default icons:

1. Create a custom service that extends the built-in IconSettingsService.

   Copy Code@Injectable()
   class MyIconService extends IconSettingsService  {}

2. Override either or both of the getSvgIcon and getCustomFontClass methods depending on the type of icons you need to customize.

   1.1 To provide custom SVG icons, override the getSvgIcon that exposes the name of the icon as an argument, and returns an SVGIcon object.

   Copy Codepublic getSvgIcon(svgIconName: string): SVGIcon {
       return customIconList[svgIconName];
   }

   1.1 To provide custom font icons, override the getCustomFontIconClass which exposes the name of the icon as an argument, and returns a space-separated string containing the desired classes.

   Copy Codepublic getCustomFontIconClass(iconName: string): string {
       return customClass[iconName];
   }

The following example demonstrates how to change the default NumericTextBox arrows with custom icons.

Suggested Links

• Icon Overview
• API Reference of the Icon
• SVGIcon Overview
• API Reference of the SVGIcon