Components / Buttons / SplitButton

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.

@Component({
    selector: 'my-app',
    template: `
        <div class="row example-wrapper">
          <div class="col-xs-12 col-sm-6 col-md-4 example-col">
            <p>Kendo UI font icon</p>
            <kendo-splitbutton [data]="saveIconData" [icon]="icon">
                Save
            </kendo-splitbutton>
            <kendo-splitbutton [data]="saveIconData" [icon]="icon"></kendo-splitbutton>
          </div>

          <div class="col-xs-12 col-sm-6 col-md-4 example-col">
            <p>FontAwsome icon</p>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
            <kendo-splitbutton [data]="replyData" [iconClass]="iconClass">
                Reply
            </kendo-splitbutton>
            <kendo-splitbutton [data]="replyData" [iconClass]="iconClass"></kendo-splitbutton>
          </div>

          <div class="col-xs-12 col-sm-6 col-md-4 example-col">
            <p>Image icon</p>
            <kendo-splitbutton [data]="saveImageData" [imageUrl]="imageUrl">
                Save
            </kendo-splitbutton>
            <kendo-splitbutton [data]="saveImageData" [imageUrl]="imageUrl"></kendo-splitbutton>
          </div>
        </div>
    `
})
class AppComponent {

    // Built-in Kendo UI icon
    public icon: string = 'save';
    public saveIconData: Array<any> = [{
        text: 'Save as'
    }, {
        text: 'Upload to drive',
        icon: 'upload'
    }];

    // FontAwesome icon
    public iconClass: string = 'fa fa-mail-reply fa-fw';
    public replyData: Array<any> = [{
        text: 'Reply All',
        iconClass: 'fa fa-mail-reply-all fa-fw'
    }, {
        text: 'Forward',
        iconClass: 'fa fa-mail-forward fa-fw'
    }, {
        text: 'Reply & Delete'
    }];

    // Image icon
    public imageUrl: string = 'https://demos.telerik.com/kendo-ui/content/web/toolbar/save.png';
    public saveImageData: Array<any> = [{
        text: 'Save All'
    }, {
        text: 'Upload to drive',
        imageUrl: 'https://demos.telerik.com/kendo-ui/content/web/toolbar/upload.png'
    }];
}

The SplitButton allows you to change the button appearance. The available options are:

  • buttonClass - Changes the button appearance. Supports the type of values that are supported by ngClass.
  • arrowButtonClass - Changes the arrow appearance. Supports the type of values that are supported by ngClass.
  • arrowButtonIcon - Specifies the name of the font icon that will be rendered for the button which opens the popup.

The following example demonstrates the options in action.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="row example-wrapper">
            <div class="col-xs-12 col-sm-6 col-md-4 example-col">
                <p>Style Button </p>
                <kendo-splitbutton
                [data]="saveIconData"
                [icon]="'k-icon k-i-save'"
                [buttonClass]="'custom-bg custom-border'"
                >
                Save
                </kendo-splitbutton>
                <kendo-splitbutton
                [data]="saveIconData"
                [icon]="'k-icon k-i-save'"
                [buttonClass]="{ 'custom-bg': true, 'custom-border': false }"
                ></kendo-splitbutton>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 example-col">
            <p>Style arrow button </p>
                <kendo-splitbutton
                [data]="saveIconData"
                [icon]="'k-icon k-i-save'"
                arrowButtonIcon="k-icon k-i-arrow-chevron-down"
                [arrowButtonClass]="'custom-arrow-bg'"
                >
                Save
                </kendo-splitbutton>
                <kendo-splitbutton
                [data]="saveIconData"
                [icon]="'k-icon k-i-save'"
                [arrowButtonClass]="{'custom-arrow-bg custom-border': true}"
                ></kendo-splitbutton>
            </div>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [ `
        .custom-arrow-bg {
            background: #ccc;
        }
        .custom-border {
            border: solid rgb(255, 92, 120);
        }
        .custom-bg {
            background: pink;
        }
    `]
})
export class AppComponent {
    // Built-in Kendo UI icon
    public icon = 'save';
    public saveIconData: Array<any> = [
        {text: 'Save as'},
        {text: 'Upload to drive', icon: 'upload' }
    ];
}


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

In this article