• Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filter
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Iconsupdated
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigationupdated
    • Notification
    • Pagerupdated
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBarupdated
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start 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.

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.

@NgModule({
    ...
    providers: [{ provide: ICON_SETTINGS, useValue: { type: 'svg', size: 'xsmall' } }]
})
export class AppModule {}

The following code snippet demonstrates how to provide the icon settings to the root module of the application.

Example
View Source
Change Theme:

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.

    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.

    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.

Example
View Source
Change Theme:

Loading Custom 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. Override the getSvgIcon and/or getCustomFontClass methods to return the desired SVGIcon or custom class(es) based on a key, provided as an argument.

To overwrite the default icons:

  1. Create a custom service that extends the built-in IconSettingsService.

    @Injectable()
    class MyIconService extends IconSettingsService  {}
  2. Override either or both of the getSvgIcon and getCustomFontClass methods depending on the type of icons you need to customize.

    1.1 To provide custom SVG icons, override the getSvgIcon that exposes the name of the icon as an argument, and returns an SVGIcon object.

    public getSvgIcon(svgIconName: string): SVGIcon {
        return customIconList[svgIconName];
    }

    1.1 To provide custom font icons, override the getCustomFontIconClass which exposes the name of the icon as an argument, and returns a space-separated string containing the desired classes.

    public getCustomFontIconClass(iconName: string): string {
        return customClass[iconName];
    }

The following example demonstrates how to change the default NumericTextBox arrows with custom icons.

Example
View Source
Change Theme: