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.

As of R2 2023 (v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg.

Using Font Icons

With v14.0.0 introduced in the R3 2023 (October 2023) release, the fonts icons will no longer be delivered with the Kendo UI themes.

To display font icons for Kendo UI for Angular components:

1. Import the font icons in your project following the steps suggested in the Setup article.

2. Set the type of icons to font using the ICON_SETTINGS token.

   Copy Codeimport { ICON_SETTINGS } from "@progress/kendo-angular-icons";
   
   @NgModule({
       ...
       providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font' } }]
   })
   export class AppModule {}

3. To display a Font icon inside a component, set the icon property to the necessary icon. Check the full list of Font icons provided by Kendo UI for Angular suite.

   Copy Code<kendo-dropdownbutton ... icon="star">Bookmarks</kendo-dropdownbutton>

The following example demonstrates a sample application using only Font icons.

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: 'font', size: 'xlarge', themeColor: 'success', flip: 'horizontally' } }]
})
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.

Changing the Built-in 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.

Copy Codeimport { IconSettingsService} from '@progress/kendo-angular-icons';

@Injectable()
class MyIconService extends IconSettingsService  {}

Depending on the type of icons used in the application you need to overwrite different methods:

• Overwrite font icons
• Overwrite SVG icons

Font Icons

To provide custom font icons or replace them with others from the Kendo UI font icon list, override the getCustomFontIconClass function. The function exposes the name of the icon as an argument and returns a space-separated string containing the desired classes.

Copy Codeprivate iconDictionary: { [key: string]: string } = {
    'caret-alt-down': 'k-icon k-font-icon k-i-arrow-down',
};

public getCustomFontIconClass(iconName: string): string {
    return this.iconDictionary[iconName] || super.getCustomFontIconClass(iconName);
}

The following example demonstrates how to change the default DropDownList caret down icon with an arrow icon.

SVG Icons

To provide custom SVG icons or replace them with others from the Kendo UI SVG icon list, override the getSvgIcon function. The function exposes the name of the icon as an argument, and returns an SVGIcon object.

Copy Codeimport * as allSVGIcons from'@progress/kendo-svg-icons';

private svgDictionary: { [key: string]: SVGIcon } = {
    'caret-alt-down': allSVGIcons.minusIcon
};

public getSvgIcon(svgIconName: string): SVGIcon {
    return this.svgDictionary[svgIconName] || super.getSvgIcon(svgIconName);
}

The following example demonstrates how to change the default NumericTextBox caret icons with plus and minus SVG icons.

Suggested Links

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