Angular Icon Settings

Updated on Jul 31, 2026

You can change the default look and feel of the icons used across all Kendo UI for Angular components by configuring the IconSettings properties. This allows you to change the type of icons, their size, theme color, variant and flip direction.

The following example demonstrates the IconSettings properties available for customizing the built-in icons.

Change Theme

Theme

Loading ...

To apply the settings globally, add IconSettingsService, IconsService, and the ICON_SETTINGS token to the providers array in main.ts. To scope the settings to a specific component, add them to that component's providers array instead.

ts

// main.ts
bootstrapApplication(AppComponent, {
    providers: [
      IconSettingsService,
      IconsService,
    { provide: ICON_SETTINGS, useValue: { type: "svg", size: "xlarge" } },
  ],
});

ts

@Component({
  ...
  providers: [
    IconSettingsService,
    IconsService,
    { provide: ICON_SETTINGS, useValue: { type: "svg", size: "xlarge" } },
  ],
})

Using Font Icons

By default, the Kendo UI for Angular components use svg icons. However, you can switch to font icons if your application requires it.

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:

1. Import the font icons in your project by using the precompiled CSS.

2. 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 {}

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>

Suggested Links

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