New to Kendo UI for Angular? Start a free 30-day trial
Icon Options
Updated on Mar 26, 2026
You can enhance the content of the SegmentedControl items by displaying SVG icons, font icons, or a combination of icons and text.
The following example demonstrates the different icon display modes of the SegmentedControl—icons with text, and icon-only with tooltips for accessibility.
Change Theme
Theme
Loading ...
SVG Icons
To display an SVG icon inside a SegmentedControl item, set the svgIcon property of the item to the necessary SVGIcon. For the full list of available icons, refer to the list of SVG icons.
The following example demonstrates how to render SVG icons inside the SegmentedControl items.
Change Theme
Theme
Loading ...
Font Icons
To display a font icon inside a SegmentedControl item:
- Use the
ICON_SETTINGStoken of the Icons package and set the icon type tofont. For more information, refer to the topic about icon settings. - Set the
iconproperty of the item to the name of a font icon from the Kendo UI theme. For the full list of available icons, refer to the list of font icons.
The following example demonstrates how to render font icons inside the SegmentedControl items.
Change Theme
Theme
Loading ...