# Icons

Each segment button in the SegmentedControl can display a text label, an icon, or both. Use the `Icon()`, `IconClass()`, and `Text()` item options to customize the appearance of individual buttons.

## Text Labels

Set the `Text()` option on each item to display a visible label inside the segment button.

```Razor HtmlHelper
@using Kendo.Mvc.UI

@(Html.Kendo().SegmentedControl()
    .Name("segmentedControl")
    .Items(items =>
    {
        items.Add().Text("Option 1").Value("option1");
        items.Add().Text("Option 2").Value("option2");
        items.Add().Text("Option 3").Value("option3");
    })
)
```

## Icons from the Kendo UI Theme

Use the `Icon()` option to display an icon from the built-in Kendo UI icon set inside a segment button. When no `Text()` is set, the item's `Value()` is used as the button's accessible label.

```Razor HtmlHelper
@using Kendo.Mvc.UI

@(Html.Kendo().SegmentedControl()
    .Name("segmentedControl")
    .Items(items =>
    {
        items.Add().Icon("bold").Value("bold");
        items.Add().Icon("italic").Value("italic");
        items.Add().Icon("underline").Value("underline");
    })
)
```

## Icons with Text

Combine `Icon()` and `Text()` to display both inside the same segment button.

```Razor HtmlHelper
@using Kendo.Mvc.UI

@(Html.Kendo().SegmentedControl()
    .Name("segmentedControl")
    .Items(items =>
    {
        items.Add().Text("Settings").Icon("gear").Value("settings");
        items.Add().Text("Home").Icon("home").Value("home");
        items.Add().Text("Profile").Icon("user").Value("profile");
    })
    .SelectedValue("home")
)
```

## Custom Icon Classes

Use `IconClass()` to append one or more CSS class names to the icon element. This allows you to apply custom styles or integrate icons from external icon libraries.

```Razor HtmlHelper
@using Kendo.Mvc.UI

@(Html.Kendo().SegmentedControl()
    .Name("segmentedControl")
    .Items(items =>
    {
        items.Add().Text("Settings").Icon("gear").IconClass("custom-icon").Value("settings");
        items.Add().Text("Home").Icon("home").Value("home");
    })
)
```

## See Also

* [SegmentedControl Overview (Demo)](https://demos.telerik.com/aspnet-mvc/segmentedcontrol/index)
* [SegmentedControl Server-Side API for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/api/segmentedcontrol)
* [SegmentedControl Client-Side API](https://docs.telerik.com/kendo-ui/api/ui/segmentedcontrol)