Appearance
The SVGIcon 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 SVGIcon by using the themeColor property. To apply custom colors to the SVGIcon, 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 SVGIcon by using the size property. To apply custom sizes to the SVGIcon, style it with CSS.
The following example demonstrates the available size values and custom size options.
Orientation
The SVGIcon allows you to invert it through an axis in different directions by using the flip property.
The following example demonstrates the available flip values.
Variant
Using the
variantproperty requires@progress/kendo-svg-iconsversion5.0.0or later, as icon variant data is only available starting from that version.
You can render the SVGIcon component in different visual styles by using the variant property. The available values are solid, outline, and duotone.
When a variant is specified, the component uses the variants property of the SVGIcon object to render the corresponding path. If the requested variant is not present on the icon, the component falls back to the default content path.
The following example demonstrates the available variant values.
Rotation
You can rotate the SVGIcon at predefined angles by setting the rotate property to an IconRotate value. When both flip and rotate are set, the flip direction takes precedence.
The following example demonstrates all available rotate values applied to an arrow icon.
Runtime Customization
Use CSS custom properties to customize SVG icon size, color, rotation, and stroke width at runtime. Apply the variables to the kendo-svg-icon element or .k-svg-icon CSS class. To limit styles to one UI area, combine a container selector with an icon selector. For the complete reference, see the SVG icon runtime customization documentation.
Icon Variables
Use the following CSS variables to customize SVG 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-color | Sets the fill and stroke color of an icon. |
--kendo-icon-rotation | Sets the rotation angle of an icon. |
--kendo-icon-stroke-width | Sets the stroke width of Outline and Duotone icon variants. This variable applies only to icons with the k-svg-icon-outline or k-svg-icon-duotone CSS class. |
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 SVG icons in either a global or component stylesheet:
kendo-svgicon {
--kendo-icon-size-md: 24px;
--kendo-icon-color: #ff6358;
--kendo-icon-rotation: 45deg;
--kendo-icon-stroke-width: 2;
}Scoped Icon Styles
To customize SVG icons in one area of your application, combine a container selector with the kendo-svg-icon selector. This overrides the variables that the icon defines by default.
The following CSS applies a consistent size and theme color to SVG icons in a toolbar:
.toolbar-actions kendo-svgicon {
--kendo-icon-size-md: 20px;
--kendo-icon-color: var(--kendo-color-primary);
}Hover Effects
To change the color or rotation of an SVG icon when a user hovers over it, set the --kendo-icon-color or --kendo-icon-rotation CSS variable. Target either the kendo-svg-icon element or the .k-svg-icon CSS class.
The following CSS applies a custom color and rotation on hover:
kendo-svgicon:hover {
--kendo-icon-color: #ff6358;
--kendo-icon-rotation: 45deg;
}