Icon SplitButton

You can enhance the textual content of the SplitButton by displaying an image, predefined or custom icons and SVG icons to the component.

The SplitButton provides the following options to set an image or icon inside the component:

• icon and arrowButtonIcon—These options render an icon inside the SplitButton. For the full list of available icons, go to the list of font icons supported by Kendo UI for Angular.
• svgIcon and arrowButtonSvgIcon—These options render an SVG icon inside the SplitButton. For the full list of available icons, go to the list of SVG icons supported by Kendo UI for Angular.
• iconClass—Displays an icon from a CSS class. Using the iconClass is suitable for rendering FontAwesome or other third-party font icons.
• imageUrl—Sets an image icon through a URL link.

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 Icon SplitButton

To display an SVG icon inside the SplitButton, set both or either of the svgIcon or arrowButtonSvgIcon properties of the SplitButton to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.

Copy Code<kendo-splitbutton
    [svgIcon]="svgShare"
    [arrowButtonSvgIcon]="svgArrow">
    Share
</kendo-splitbutton>

Copy Codeimport { shareIcon, arrowDownIcon, SVGIcon } from '@progress/kendo-svg-icons';

public svgShare: SVGIcon = shareIcon;
public svgArrow: SVGIcon = arrowDownIcon;

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

Font Icon SplitButton

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. For details, go to the list of font icons supported by Kendo UI for Angular.

     Copy Code<kendo-splitbutton icon="save" arrowButtonIcon='arrow-down'... > Save </kendo-splitbutton>

   • iconClass property to a third-party font icon library (such as FontAwesome).

     Copy Code<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.

Using an Image URL

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

Copy Code<kendo-splitbutton
    imageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png" ... >
     Golf Courses
</kendo-splitbutton>

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

Suggested Links

• API Reference of the SplitButton
• SVG icons list
• Font icons list