# 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-react-ui/components/buttons/api/segmenteditemprops#svgIcon)—Displays an SVG icon. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-react-ui/components/common/svgicon#svg-icons-list).
* [`iconClassName`](https://www.telerik.com/kendo-react-ui/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-react-ui/components/buttons/api/segmentedcontrolprops#itemTemplate)—Renders custom item content, such as a font icon when using the [Icon component](https://www.telerik.com/kendo-react-ui/components/common/icon).

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-react-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-react-ui/components/buttons/api/segmenteditemprops#svgIcon) property of the item to the necessary [`SVGIcon`](https://www.telerik.com/kendo-react-ui/components/common/api/svgicon).

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

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-react-ui/components/buttons/api/segmentedcontrolprops#itemTemplate) prop to render the [Icon component](https://www.telerik.com/kendo-react-ui/components/common/icon) inside the item.

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

## Custom Icon Class

The [`iconClassName`](https://www.telerik.com/kendo-react-ui/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-react-ui/buttons/segmentedcontrol/icon-class/source.txt)

## End Icon

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

* [`endSvgIcon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmenteditemprops#endsvgicon)—Sets an SVG icon after the item text.
* [`endIcon`](https://www.telerik.com/kendo-react-ui/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-react-ui/components/styling/migrating-font-svg#continue-using-font-icons).

You can combine an end icon with the existing [`svgIcon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmenteditemprops#svgicon) prop. The end icon uses the same theme class and selected-state [`iconClassName`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmenteditemprops#iconclassname) as the leading icon. A custom [`itemTemplate`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolprops#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.

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

## Suggested Links

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