SegmentedControl Icon Options
You can enhance the content of the SegmentedControl items by displaying SVG icons, font icons, or a combination of icons and text.
The SegmentedControl items support the following icon options:
svgIcon—Displays an SVG icon. For available icons, refer to the list of SVG icons.iconClassName—Applies a custom CSS class to the icon element when the item is selected.itemTemplate—Renders custom item content, such as a font icon when using the Icon component.
The following example demonstrates icon and text items, as well as icon-only items with accessible labels and optional tooltips.
SVG Icons
To display an SVG icon inside a SegmentedControl item, set the svgIcon property of the item to the necessary SVGIcon.
import { boldIcon } from '@progress/kendo-svg-icons';
const items = [{ value: 'bold', text: 'Bold', svgIcon: boldIcon }];
<SegmentedControl items={items} />;Font Icons
To display a Font icon inside a SegmentedControl item:
- Load the font icons in your project so that the icon renders as expected.
- Use the
itemTemplateprop to render the Icon component inside the item.
const itemTemplate = (item: SegmentedItemProps) => (
<>
<Icon name={item.value} />
<span>{item.text}</span>
</>
);
<SegmentedControl items={items} itemTemplate={itemTemplate} />;For more details on how to set up an
itemTemplate, refer to Item Templates.
Custom Icon Class
The iconClassName property applies a custom CSS class to the icon element when the item is selected. Use this property to style the active icon differently from the unselected icons.
The following example demonstrates a custom CSS class applied to the active icon.
End Icon
To display an icon after a SegmentedControl item's text, use the following props:
endSvgIcon—Sets an SVG icon after the item text.endIcon—Sets a font icon from the Kendo UI theme after the item text. To render font icons, set the icon type tofont.
You can combine an end icon with the existing svgIcon prop. The end icon uses the same theme class and selected-state iconClassName as the leading icon. A custom itemTemplate replaces all default item content, including end icons.
The following example demonstrates how to display SVG and font end icons on SegmentedControl items, including an item that combines a leading and an end icon.