SplitButton Icon Options

Updated on Nov 6, 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 FontAwesome icon.
• imageUrl—Displays an image from a URL.
• arrowButtonSvgIcon and arrowButtonIcon—Replaces the default chevron-down icon of the arrow button with an SVG or font icon.
• endSvgIcon and 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.

SVG Icons

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

html

<kendo-splitbutton [svgIcon]="svgShare">
    Share
</kendo-splitbutton>

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.

Example

View Source

Loading ...

Font Icons

To display a Font icon inside the SplitButton:

1. Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
2. Depending on the font icons library, you can set the:
   • icon or arrowButtonIcon properties to a font icon in the Kendo UI theme.
     html

     <kendo-splitbutton icon="save" arrowButtonIcon="arrow-down">Save</kendo-splitbutton>

   • iconClass property to a third-party font icon library (such as FontAwesome).
     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.

Example

View Source

Loading ...

Image URL

To display an image from a URL, set the 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.

Example

View Source

Loading ...

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 property. To replace it with a font icon, set the 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.

Example

View Source

Loading ...

End Icon

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

• endSvgIcon—Sets an SVGIcon 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.

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 or 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.

Example

View Source

Loading ...

Suggested Links

• API Reference of the SplitButton
• Icon Settings