Icon SplitButtonPremium
You can enhance the textual content of the SplitButton by adding image, predefined, or custom icons to it.
With a view to the web standards, it is better to use a background image because icons are used for decoration and not for representing structural content.
The SplitButton provides options for:
- Using the built-in KendoReact icons. They are applied through the
iconproperty and displayed as a background for the SplitButton. - Adding FontAwesome and other font icons. They are implemented by setting the required third-party CSS classes through the
iconClassproperty. - Adding image icons. They are applied through the
imageUrlproperty of the component.
The following example demonstrates how to use the different types of icons in a SplitButton.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />Arrow Button Icon
By default, the arrow button of the SplitButton displays a chevron-down icon. To replace it with a different icon, use the arrowButtonSvgIcon property. To use a font icon instead, use 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.