New to Kendo UI for AngularStart a free 30-day trial

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.

    ts
    import { 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.

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

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

Change Theme
Theme
Loading ...

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.

ts
@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.

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:

  1. Inject the IconSettingsService in the constructor.

    ts
    constructor(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.

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

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.

ts
import { IconSettingsService} from '@progress/kendo-angular-icons';

@Injectable()
class MyIconService extends IconSettingsService  {}

To register the custom service, include it in the providers array of either the NgModule or a standalone component,

ts
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:

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.

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

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