Integrate Third-Party Icons

Updated on Aug 4, 2026

After configuring icon overrides, you can use any third-party icon library with Kendo UI for Angular by mapping its icons to Kendo icon names.

This article demonstrates the process using Lucide for SVG icons and Bootstrap Icons for font icons. The same approach applies to other icon libraries. Browse the SVGIcon List or Font Icon List to find the Kendo icon names you want to override.

Override SVG Icons with Third-Party Libraries

The following demo showcases how to override the SVG icons of the Grid using a third-party library such as Lucide and Tabler.

Change Theme

Theme

Loading ...

Implementation

To use Lucide icons in Kendo UI for Angular, you need to install the lucide-static package and import the icons you want to use. Create a custom service that extends the IconSettingsService and overrides the getSvgIcon method to return the Lucide icon content for the requested Kendo icon name.

1. Kendo UI and Lucide use different icon names, so create a lookup table that maps Kendo icon names to their Lucide equivalents.

   ts

   import {FunnelPlus, ChevronDown, ArrowDownAZ} from 'lucide-static';
   
   const ICON_MAP: Record<string, string> = {
       'filter': FunnelPlus,
       'chevron-down': ChevronDown,
       'sort-asc-small': ArrowDownAZ,
       // ...
   };

2. Override the getSvgIcon method of IconSettingsService to return the Lucide icon content for the requested Kendo icon name.

   ts

   @Injectable()
   export class MyLucideIconService extends IconSettingsService {
     public override getSvgIcon(iconName: string): SVGIcon {
       const lucideName = ICON_MAP[iconName];
       return {
         name: iconName,
         content: lucideName,
         viewBox: '0 0 24 24',
       };
     }
   }

3. Register the custom service as described in Customize Default Icons.

Override Font Icons with Third-Party Libraries

The following demo showcases how to override the font icons of the Grid and TreeList using Bootstrap Icons. Use the segmented control to switch between the default Kendo font icons and Bootstrap Icons.

Change Theme

Theme

Loading ...

Implementation

To use Bootstrap Icons, load the stylesheet or install the bootstrap-icons package.

1. Create a lookup table that maps Kendo icon names to Bootstrap icon class strings.

   ts

   const BOOTSTRAP_ICON_CLASSES: { [key: string]: string } = {
       'filter': 'bi bi-funnel-fill',
       'filter-clear': 'bi bi-x-circle',
       'sort-asc-small': 'bi bi-sort-alpha-down',
       'sort-desc-small': 'bi bi-sort-alpha-up',
       // ...
   };

2. Override the getCustomFontIconClass method of IconSettingsService to return the Bootstrap icon class for the requested Kendo icon name. Use a signal to switch between libraries at runtime and call notify() to propagate the change.

   ts

   @Injectable()
   export class MyBootstrapIconService extends IconSettingsService {
       public override getCustomFontIconClass(iconName: string): string {
           return BOOTSTRAP_ICON_CLASSES[iconName] ?? super.getCustomFontIconClass(iconName);
       }
   }

3. Register the custom service as described in Customize Default Icons.

Suggested Links

• Icon Settings
• Icon Overview
• SVGIcon Overview
• API Reference of IconSettingsService
• API Reference of ICON_SETTINGS