# SplitButton Icon Options

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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#svgicon)—Displays an SVG icon. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-vue-ui-develop/components/icons/svgicon/svgicon-list).
* [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#icon)—Displays a font icon from the Kendo UI theme. For available icons, refer to the [list of font icons](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/).
* [`iconClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#iconclass)—Displays an icon from a CSS class, such as a [Font Awesome](https://fontawesome.com/) icon.
* [`imageUrl`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#imageurl)—Displays an image from a URL.
* [`endSvgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#endsvgicon) and [`endIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/splitbutton/icons/source.txt)

## SVG Icons

To display an SVG icon, set the [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#svgicon) property of the SplitButton to the necessary [`SVGIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/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:

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. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#icon) property to a font icon in the Kendo UI theme.
     ```vue
     <SplitButton :icon="'gear'" :items="items" :text="'Settings'" />
     ```
   * [`iconClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#iconclass) property to a third-party font icon library (such as [FontAwesome](https://fontawesome.com/)).
     ```vue
     <SplitButton :icon-class="'fa fa-cog'" :items="items" :text="'Settings'" />
     ```

## Image URL

To display an image from a URL, set the [`imageUrl`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#endsvgicon)—Sets an SVG icon after the SplitButton text.
* [`endIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#endicon)—Sets a font icon from the Kendo UI theme after the SplitButton text. To render font icons, [set the icon type to `font`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon-settings).

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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#svgicon) or [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops#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.

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

## Suggested Links

* [API Reference of the SplitButton](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/splitbuttonprops)
* [Content Setup](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/splitbutton/content)
* [Icon Component](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon)