Icon SplitButton

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 Kendo UI icons. They are applied through the icon property and displayed as a background for the SplitButton. To see the full list of the web font icons in Kendo UI, refer to the article on styles and layout.
  • Adding FontAwesome and other font icons. They are implemented by setting the required third-party CSS classes through the iconClass property.
  • Adding image icons. They are applied through the imageUrl property 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">
const iconItems = [{text: 'Save as'}, {text: 'Upload to drive', icon: 'upload'}];
const iconClassItems = [
    {text: 'Reply all', iconClass: 'fa fa-mail-reply-all fa-fw'},
    {text: 'Forward', iconClass: 'fa fa-mail-forward fa-fw'},
    {text: 'Reply & delete'}
];
const imageItems = [{text: 'Save as'}, {text: 'Upload to drive', icon: 'upload'}];
const imageUrl = "https://demos.telerik.com/kendo-ui/content/web/toolbar/save.png";
class ButtonContainer extends React.Component {
    render() {
        return (
            <div className="row example-wrapper">
              <div className="col-xs-12 col-sm-6 example-col">
                <p>Kendo UI font icon</p>
                <SplitButton items={iconItems} icon="save" text="Save" />
                <SplitButton items={iconItems} icon="save" />
              </div>
              <div className="col-xs-12 col-sm-6 example-col">
                <p>FontAwеsome icon</p>
                <SplitButton items={iconClassItems} iconClass="fa fa-mail-reply fa-fw" text="Reply" />
                <SplitButton items={iconClassItems} iconClass="fa fa-mail-reply fa-fw" />
              </div>
              <div className="col-xs-12 col-sm-6 example-col">
                <p>Image icon</p>
                <SplitButton items={imageItems} imageUrl={imageUrl} text="Save" />
                <SplitButton items={imageItems} imageUrl={imageUrl} />
              </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonContainer/>,
    document.querySelector('my-app')
);

In this article

 /