Change the Default Icons
Applications often require using custom icons to align with a design system, branding requirements, or an existing icon set.
Kendo UI for Angular lets you override default icons at different scopes by providing a custom icon service. Choose the scope that matches the level of customization you need.
| Override scope | When to use | Example |
|---|---|---|
| Per application | Apply the same icon customization across all Kendo UI components at the application level. | Replace the default Kendo filter icon with a custom filter icon across the entire application. |
| Per component type | Customize icons for a component type while leaving all other components unchanged. | Replace the filter icon in every Grid while keeping the default filter icon in all other components. |
| Single icon | Customize single icons for a specific component instance without affecting any others. | Replace the expand/collapse icons in a specific Grid instance. |
Prerequisites
Providing a custom IconSettingsService is the first step in overriding default icons.
The scope of the override depends on where you provide the service in the Angular dependency injection hierarchy - at the application level or within a component injector.
// main.ts
bootstrapApplication(AppComponent, {
providers: [
{ provide: ICON_SETTINGS, useValue: { type: 'svg' } }, // or 'font'
{ provide: IconSettingsService, useClass: MyIconService },
],
});Override Icons Per Application
You can override default icons for all Kendo UI components that use the application-level icon service. This is the most common scenario when integrating a design system, using a third-party icon library, or applying a company-wide icon set.
Extend IconSettingsService and override getSvgIcon to return icons from your library. Call super for unmapped icons. Browse the SVGIcon List to find the key of the icon you want to override.
import * as allSVGIcons from '@progress/kendo-svg-icons';
const ICON_MAP: Record<string, SVGIcon> = {
'chevron-down': allSVGIcons.minusIcon,
'chevron-up': allSVGIcons.plusIcon,
};Click the swap icon button in the demo below to see the default component icons replaced with other icons from the Kendo SVG icon library.
Extend IconSettingsService and override getCustomFontIconClass to return CSS class strings from your font library. Call super for unmapped icons. Browse the Font Icon List to find the key of the icon you want to override.
const ICON_MAP: Record<string, string> = {
'x': 'fa-solid fa-xmark',
'search': 'fa-solid fa-magnifying-glass',
};Click Swap Icons in the demo below to toggle between the default Kendo font icons and the custom overrides across the Chat, Grid, and TreeList.
Override Icons per Component Type
You can override icons for all instances of one Kendo UI component while keeping the default icons in other components unchanged. This is useful when you want to customize a specific component icons without affecting other components that use the same icons.
Extend IconSettingsService and override getSvgIcon to return a different icon for a specific component type. Call super for unmapped icons. Browse the SVGIcon List to find the key of the icon you want to override.
import * as allSVGIcons from '@progress/kendo-svg-icons';
const COMPONENT_ICON_MAP = {
grid: {
'chevron-down': allSVGIcons.minusIcon,
'chevron-up': allSVGIcons.plusIcon,
},
};The following example overrides the Grid icons only leaving the same in the TreeList unchanged.
Extend IconSettingsService and override getCustomFontIconClass to return a different font icon class for a specific component type. Browse the Font Icon List to find the key of the icon you want to override.
const COMPONENT_ICON_MAP: Record<string, Record<string, string>> = {
grid: {
'chevron-down': 'k-icon k-font-icon k-i-minus',
'sort-asc-small': 'k-icon k-font-icon k-i-sort-asc-sm',
// ...
},
};The following example overrides the Grid icons only. Click Swap Grid Icons to toggle the overrides on and off — the TreeList retains the default icons at all times.
Override Specific Icons with CSS
You can override specific icons for a single component instance without affecting any other component in the same view. Use this approach for isolated customizations where an application-level or component-type override would be too broad.
To replace a specific SVG icon create a CSS rule that scopes the icon selector to your custom class and set the content property to a data URI containing your custom SVG markup.
Ensure your SVG includes the xmlns attribute and style="pointer-events: none;" for proper rendering and interaction.
thead tr th:nth-child(1) .k-svg-i-sort-asc-small.k-svg-icon {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://..."><path d="..."></path></svg>');
}The following example demonstrates how to override sort icons per column type in a single Grid instance — string columns use A-Z/Z-A icons, the number column uses 0-1/1-0 icons, and the Type column retains the default sort icon.
To replace a specific font icon create a CSS rule that targets the ::before pseudo-element of that specific class and set the content property to the Unicode glyph code. Scope the selector to a specific column using :nth-child() to limit the override to that column only. For Kendo Icons you can check the glyph codes in the icons list.
kendo-grid thead tr th:nth-child(1) .k-i-sort-asc-small::before {
content: '\\e41d'; /* arrow-up-a-z */
font-family: 'WebComponentsIcons';
}The following example demonstrates how to override sort icons per column type in a single Grid instance — string columns use A-Z/Z-A icons, the number column uses 0-1/1-0 icons, and the Type column retains the default sort icon.