Kendo UI for Vue Native Icon Configuration
In real-world scenarios, not only the color, size, and type of icon used in the application need to be changed or dynamically updated at runtime. In this article, you will find more details about how to replace the built-in icons of the Kendo UI for Vue Native suite or replace them with custom ones.
Changing the Built-In Icons in the Kendo UI for Vue Native Components
Some scenarios require the customization of the default Kendo UI for Vue components. When you need to change the icons inside the different components, this can be achieved by providing a custom kendoIcons definition as follows:
provide() {
return {
kendoIcons: {
type: 'svg',
icons: {
bold: starIcon,
'caret-alt-down': starIcon,
},
},
};
}The following example uses the above definition and demonstrates how to change the default icon in the DropDownList component and also the icon of the bold button inside the Editor component.
To identify the name of the icon you want to update, you can inspect the component and find a CSS class with a k-iconname structure(This inspection should be done before providing the new kendoIcons definition). Once the proper class is identified, the property name you need to pass in kendoIcons is the text after the k- prefix.
