# 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-angular-ui-develop/components/buttons/api/splitbuttoncomponent#svgicon)—Displays an SVG icon. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-angular-ui-develop/components/icons/svgicon/svgicon-list).
* [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#icon)—Displays a font icon from the Kendo UI theme. For available icons, refer to the [list of font icons](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon/icon-list).
* [`iconClass`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#iconclass)—Displays an icon from a CSS class, such as a [FontAwesome](https://fontawesome.com/) icon.
* [`imageUrl`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#imageurl)—Displays an image from a URL.
* [`arrowButtonSvgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#arrowbuttonsvgicon) and [`arrowButtonIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#arrowbuttonicon)—Replaces the default chevron-down icon of the arrow button with an SVG or font icon.
* [`endSvgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#endsvgicon) and [`endIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#endicon)—Displays an SVG or font icon after the text of the primary button.

> As of R2 2023 (`v13.0.0`) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from `font` to `svg`. Set the `svgIcon` property, or [Continue Using Font Icons](https://www.telerik.com/kendo-angular-ui-develop/components/styling/migrating-font-svg#continue-using-font-icons).

## SVG Icons

To display an SVG icon, set the [`svgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#svgicon) property of the SplitButton to the necessary [`SVGIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/icons/api/svgicon).

```html example.component.html
<kendo-splitbutton [svgIcon]="svgShare">
    Share
</kendo-splitbutton>
```

```ts example.component.ts
import { shareIcon, SVGIcon } from '@progress/kendo-svg-icons';

public svgShare: SVGIcon = shareIcon;
```

The following example demonstrates how to set an SVG icon inside the SplitButton.

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

## Font Icons

To display a Font icon inside the SplitButton:

1. Use the [`ICON_SETTINGS`](https://www.telerik.com/kendo-angular-ui-develop/components/icons/api/icon_settings) token of the Icons package and set the icon type to `font`. For more information, go to the topic about [icon settings](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon-settings#using-font-icons).
2. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#icon) or [`arrowButtonIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#arrowbuttonicon) properties to a font icon in the Kendo UI theme.
     ```html
     <kendo-splitbutton icon="save" arrowButtonIcon="arrow-down">Save</kendo-splitbutton>
     ```
   * [`iconClass`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#iconclass) property to a third-party font icon library (such as [FontAwesome](https://fontawesome.com/)).
     ```html
     <kendo-splitbutton iconClass="fa fa-suitcase">Travel by</kendo-splitbutton>
     ```

The following example demonstrates how to set the `icon`, `arrowButtonIcon`, and `iconClass` properties of the SplitButton.

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

## Image URL

To display an image from a URL, set the [`imageUrl`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#imageurl) property of the SplitButton.

```html
<kendo-splitbutton
    imageUrl="assets/buttons/sports/golf.png">
    Golf Courses
</kendo-splitbutton>
```

The following example demonstrates the `imageUrl` property of the SplitButton in action.

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

## Arrow Button Icon

By default, the arrow button of the SplitButton displays a chevron-down icon. To replace it with a different SVG icon, set the [`arrowButtonSvgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#arrowbuttonsvgicon) property. To replace it with a font icon, set the [`arrowButtonIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#arrowbuttonicon) property.

The following example demonstrates how to replace the default chevron-down arrow icon with a custom SVG icon by setting the `arrowButtonSvgIcon` property.

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

## End Icon

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

* [`endSvgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#endsvgicon)—Sets an [`SVGIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/icons/api/svgicon) after the SplitButton text.
* [`endIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#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-angular-ui-develop/components/icons/icon-settings).

```html
<kendo-splitbutton
    [data]="shareData"
    [svgIcon]="svgShare"
    [endSvgIcon]="svgDownload">
    Share
</kendo-splitbutton>
```

The `endSvgIcon` and `endIcon` properties do not change the arrow button. To replace its icon, use the [`arrowButtonSvgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#arrowbuttonsvgicon) or [`arrowButtonIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent#arrowbuttonicon) property.

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

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

## Suggested Links

* [API Reference of the SplitButton](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/splitbuttoncomponent)
* [Icon Settings](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon-settings)