New to Kendo UI for jQuery? Start a free 30-day trial

Items.icon

configuration

Defines the name for an existing icon in a Kendo UI theme or SVG content. The icon is rendered inside the button.

Set this option to an icon descriptor such as { name: "gear", variant: "outline" }. The variant can be outline, solid, or duotone; it applies to SVG rendering and is ignored for font icons.

items.icon

String|Object

Default: null

<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
  items: [
    { text: "Settings", icon: "gear", value: "settings" },
    { text: "Home", icon: "home", value: "home" }
  ]
});
</script>

items.icon.name

String

The name of the SVG icon.

<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
  items: [
    { text: "Settings", icon: { name: "gear" }, value: "settings" },
    { text: "Home", icon: { name: "home" }, value: "home" }
  ]
});
</script>

items.icon.variant

String

The SVG icon variant. Supported values are outline, solid, and duotone. The variant applies to SVG rendering and is ignored for font icons.

<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
  items: [
    { text: "Settings", icon: { name: "gear", variant: "outline" }, value: "settings" },
    { text: "Home", icon: { name: "home", variant: "outline" }, value: "home" }
  ]
});
</script>