New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Icons
Updated on Mar 24, 2026
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
@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
@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
@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
@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");
})
)