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.
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:
-
Inject the
IconSettingsService
in the constructor.constructor(public iconService: IconSettingsService){}
-
Call the
notify
method exposed by the service and provide the newIconSettings
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.
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:
-
Create a custom service that extends the built-in
IconSettingsService
.@Injectable() class MyIconService extends IconSettingsService {}
-
Override either or both of the
getSvgIcon
andgetCustomFontClass
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 anSVGIcon
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.