New to Kendo UI for Angular? Start a free 30-day trial

Angular Icon Settings

In modern applications, the color, size, and type of icons (font or SVG) often need to be customized or dynamically updated at runtime.

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.

You can configure the icon type globally in the providers array within the main.ts file, or locally in a component's providers array, depending on your application's needs.

Using Font Icons

Starting with v14.0.0, introduced in the R3 2023 (October 2023) release, font icons are no longer included in the Kendo UI themes. Font icons are now distributed through the @progress/kendo-font-icons standalone package.

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

Change Theme

Theme

Loading ...

To display font icons for Kendo UI for Angular components:

Import the font icons in your project either by using the precompiled CSS or through a CDN link.

Provide the IconSettingsService and set the type of icons to font using the ICON_SETTINGS token.

ts
import { ICON_SETTINGS, IconSettingsService, IconsService } from "@progress/kendo-angular-icons";

@Component({
    ...
    standalone: true,
    providers: [
        IconSettingsService,
        IconsService, // Required if KENDO_ICONS is imported.
        {
            provide: ICON_SETTINGS,
            useValue: { type: 'font' },
        },
    ]
})
ts
@NgModule({
    ...
    providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font' } }]
})
export class AppModule {}

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.
html
```
<kendo-dropdownbutton ... icon="star">Bookmarks</kendo-dropdownbutton>
```

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.

ts
@NgModule({
    ...
    providers: [{
        provide: ICON_SETTINGS,
        useValue: { type: 'font', size: 'xlarge', themeColor: 'success', flip: 'horizontally' }
    }]
})
export class AppModule {}
ts
// main.ts
bootstrapApplication(AppComponent, {
  providers: [
    IconSettingsService,
    IconsService, // Required if KENDO_ICONS is imported.
    {
      provide: ICON_SETTINGS,
      useValue: {
        type: 'font',
        size: 'xlarge',
        themeColor: 'success',
        flip: 'horizontally',
      },
    },
  ],
})

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.

import { IconSettingsService} from '@progress/kendo-angular-icons';
@Injectable()
class MyIconService extends IconSettingsService  {}

providers: [
    IconsService, // Required if KENDO_ICONS is imported in standalone component.
    { provide: ICON_SETTINGS, useValue: { type: 'font' } },
    { provide: IconSettingsService, useClass: MyIconService },
],

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

Overwrite font icons
Overwrite SVG 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.

private 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.

Change Theme

Theme

Loading ...

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.

import * 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.

Change Theme

Theme

Loading ...

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:

Inject the IconSettingsService in the constructor.

constructor(public iconService: IconSettingsService){}

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.

export 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.

Change Theme

Theme

Loading ...