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

SplitButton Icon Options

Updated on Nov 11, 2026

You can enhance the textual content of the SplitButton by displaying SVG icons, font icons, or images.

The SplitButton supports the following icon options:

svgIcon—Displays an SVG icon. For available icons, refer to the list of SVG icons.
icon—Displays a font icon from the Kendo UI theme. For available icons, refer to the list of font icons.
iconClass—Displays an icon from a CSS class, such as a Font Awesome icon.
imageUrl—Displays an image from a URL.
endSvgIcon and endIcon—Displays an SVG or font icon after the SplitButton text.

The following example demonstrates a SplitButton with a font icon, an SVG icon, a Font Awesome icon, and an image.

Loading ...

SVG Icons

To display an SVG icon, set the svgIcon property of the SplitButton to the necessary SVGIcon.

vue

<script setup>
import { SplitButton } from '@progress/kendo-vue-buttons';
import { gearIcon } from '@progress/kendo-svg-icons';
</script>

<template>
    <SplitButton :svg-icon="gearIcon" :items="items" :text="'Settings'" />
</template>

Font Icons

To display a Font icon inside the SplitButton:

Load the font icons in your project so that the icon renders as expected.
Depending on the font icons library, you can set the:
- icon property to a font icon in the Kendo UI theme.
  vue
```
<SplitButton :icon="'gear'" :items="items" :text="'Settings'" />
```
- iconClass property to a third-party font icon library (such as FontAwesome).
  vue
```
<SplitButton :icon-class="'fa fa-cog'" :items="items" :text="'Settings'" />
```

Image URL

To display an image from a URL, set the imageUrl property of the SplitButton.

vue

<SplitButton :image-url="'https://example.com/icons/settings.png'" :items="items" :text="'Settings'" />

End Icon

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

endSvgIcon—Sets an SVG icon after the SplitButton text.
endIcon—Sets a font icon from the Kendo UI theme after the SplitButton text. To render font icons, set the icon type to font.

The endSvgIcon and endIcon props do not change the arrow button.

You can also combine it with a custom leading icon configured through the svgIcon or icon prop.

The following example demonstrates how to set an SVG icon after the text of the primary button of the SplitButton by setting the endSvgIcon prop.