Appearance
The Icon provides various styling options that are related to its appearance.
Kendo UI Icons version
^5.x.xrequires Kendo UI for Angularv24.0.0or later. For more information, refer to the Icon Package Compatibility section.
Theme Color
In terms of the current theme, you can apply predefined theme colors to the Icon by using the themeColor property. To apply custom colors to the Icon, style it with CSS.
The following example demonstrates the available themeColor values and custom color options.
Size
You can apply predefined size options to the Icon by using the size property. To apply custom sizes to the Icon, style it with CSS.
The following example demonstrates the available size values and custom size options.
Orientation
The Icon allows you to invert it through an axis in different directions by using the flip property.
The following example demonstrates the available flip values.
Runtime Customization
Use CSS custom properties to customize font icon size and rotation at runtime. Apply the variables to the kendo-icon element or .k-font-icon CSS class. To limit styles to one UI area, combine a container selector with an icon selector. For the complete reference, see the font icon runtime customization documentation.
Icon Variables
Use the following CSS variables to customize font icons:
| CSS variable | Description |
|---|---|
--kendo-icon-size | Sets the base icon size globally. |
--kendo-icon-size-{size} | Sets the size for a predefined icon size. |
--kendo-icon-rotation | Sets the rotation angle of an icon. |
Set --kendo-icon-size on :root to change the base size globally. To set the size of one icon or one UI area, use the matching size-specific variable. For example, default icons use --kendo-icon-size-md, and icons with size="large" use --kendo-icon-size-lg.
Depending on your theme configuration and stylesheet load order, you might need to add
!importantto the global--kendo-icon-sizedeclaration to override the theme value.
Use the following CSS to customize font icons in either a global or component stylesheet:
kendo-icon {
--kendo-icon-size-md: 24px;
--kendo-icon-rotation: 45deg;
}Scoped Icon Styles
To customize font icons in one area of your application, combine a container selector with the kendo-icon selector. This overrides the variables that the icon defines by default.
The following CSS applies a consistent size to font icons in a toolbar:
.toolbar-actions kendo-icon {
--kendo-icon-size-md: 20px;
}Hover Color
To change the color of a font icon when a user hovers over it, set its color CSS property. Target either the kendo-icon element or the .k-font-icon CSS class.
The following CSS targets the font icon element and applies a custom hover color:
kendo-icon:hover {
color: #ff6358;
}The
themeColorproperty applies an important color utility. When you setthemeColor, add!importantto the hover color declaration to override it.