# 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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops#svgIcon)—Displays an SVG icon. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-vue-ui-develop/components/icons/svgicon/svgicon-list).
* [`iconClassName`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops#iconClassName)—Applies a custom CSS class to the icon element when the item is selected.
* [`itemTemplate`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmentedcontrolprops#itemtemplate)—Renders custom item content, such as a font icon when using the [Icon component](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon).
* [`endSvgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops#endsvgicon) and [`endIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops#endicon)—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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/segmentedcontrol/icons/source.txt)

## SVG Icons

To display an SVG icon inside a SegmentedControl item, set the [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops#svgIcon) property of the item to the necessary [`SVGIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/svgicon).

```vue
<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:

1. [Load the font icons in your project](https://www.telerik.com/design-system/docs/foundation/iconography/font-icons/#usage) so that the icon renders as expected.
2. Use the [`itemTemplate`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmentedcontrolprops#itemtemplate) prop to render the [Icon component](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon) inside the item.

```vue
<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](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/segmentedcontrol/customization#item-templates).

## Custom Icon Class

The [`iconClassName`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/segmentedcontrol/icon-class/source.txt)

## End Icon

To display an icon after the SegmentedControl item text, use the following props:

* [`endSvgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops#endsvgicon)—Sets an SVG icon after the item text.
* [`endIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops#endicon)—Sets a font icon from the Kendo UI theme after the item text. To render font icons, [set the icon type to `font`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon-settings).

```vue Vue
<SegmentedControl :items="items" />
```

```ts TS
import { chevronRightIcon, searchIcon, sparklesIcon } from '@progress/kendo-svg-icons';

const items = [
    { text: 'Search', endSvgIcon: searchIcon },
    { text: 'AI', endSvgIcon: sparklesIcon },
    { text: 'Next', endSvgIcon: chevronRightIcon }
];
```

You can also combine the end icon with a custom leading icon configured through the [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops#svgicon) or [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops#icon) prop.

The end icon uses the same theme class and selected-state [`iconClassName`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops#iconclassname) as the leading icon. A custom [`itemTemplate`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmentedcontrolprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/segmentedcontrol/end-icon/source.txt)

## Suggested Links

* [SegmentedControl Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/segmentedcontrol/appearance)
* [API Reference of the SegmentedControl](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmentedcontrolprops)
* [API Reference of the SegmentedItemProps](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops)