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.endSvgIconandendIcon—Displays an SVG or font icon after the item text.
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.
<script setup>
import { SegmentedControl } from '@progress/kendo-vue-buttons';
import { boldIcon } from '@progress/kendo-svg-icons';
const items = [{ value: 'bold', text: 'Bold', svgIcon: boldIcon }];
</script>
<template>
<SegmentedControl :items="items" />
</template>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.
<script setup>
import { SegmentedControl } from '@progress/kendo-vue-buttons';
import { FontIcon } from '@progress/kendo-vue-common';
import '@progress/kendo-font-icons/dist/index.css';
const items = [{ value: 'bold', text: 'Bold' }];
</script>
<template>
<SegmentedControl :items="items" :item-template="'itemTemplate'">
<template #itemTemplate="{ props }">
<FontIcon :name="props.item.value" />
<span>{{ props.item.text }}</span>
</template>
</SegmentedControl>
</template>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 the SegmentedControl item 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.
<SegmentedControl :items="items" />You can also combine the end icon with a custom leading icon configured through the svgIcon or icon 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 end icons on the SegmentedControl items by setting the endSvgIcon and endIcon props.