Components / Buttons / DropDownButton

Icon DropDownButton

You can enhance the textual content of the DropDownButton by adding image, predefined, or custom icons to it.

The DropDownButton provides options for using:

  • Built in Kendo UI icons— they are applied through the icon property and displayed as a background for the DropDownButton. To see the full list of the web font icons in Kendo UI, refer to the article on styles and layout.
  • FontAwesome and other font icons—they are implemented by setting the required third-party CSS classes through the iconClass property.
  • 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 DropDownButton.

@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-dropdownbutton [data]="settings" [icon]="icon">
                User Settings
            </kendo-dropdownbutton>
            <kendo-dropdownbutton [data]="settings" [icon]="icon"></kendo-dropdownbutton>
          </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-dropdownbutton [data]="settings" [iconClass]="iconClass">
                User Settings
            </kendo-dropdownbutton>
            <kendo-dropdownbutton [data]="settings" [iconClass]="iconClass"></kendo-dropdownbutton>
          </div>

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

    // Built-in Kendo UI icon
    icon: string = 'cog';
    settings: Array<any> = [{
        text: 'My Profile'
    }, {
        text: 'Friend Requests'
    }, {
        text: 'Account Settings'
    }, {
        text: 'Support'
    }, {
        text: 'Log Out'
    }];

    // FontAwesome icon
    iconClass: string = 'fa fa-cog fa-fw';

    // Image icon
    imageUrl: string = 'https://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png';
    bookmarks: Array<any> = [{
        text: 'Show All'
    }, {
        text: 'Bookmark This Page'
    }, {
        text: 'Import'
    }, {
        text: 'Export'
    }];
}

The DropDownButton allows you to change the button appearance using the buttonClass option that supports the type of values that are supported by ngClass.

The following example demonstrates the option 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">
                <kendo-dropdownbutton
                [data]="settings"
                [icon]="'k-icon k-i-cog'"
                [buttonClass]="'custom-border custom-bg'"
                >
                User Settings
                </kendo-dropdownbutton>

                <kendo-dropdownbutton
                [data]="settings"
                [icon]="'k-icon k-i-cog'"
                [buttonClass]="['custom-border', 'custom-bg']"
                ></kendo-dropdownbutton>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 example-col">
                <kendo-dropdownbutton
                [data]="settings"
                [icon]="'k-icon k-i-user'"
                [buttonClass]="{ 'custom-border': false, 'custom-bg': true }"
                >
                Profile
                </kendo-dropdownbutton>

                <kendo-dropdownbutton
                [data]="settings"
                [icon]="'k-icon k-i-user'"
                [buttonClass]="{ 'custom-border custom-bg': true }"
                ></kendo-dropdownbutton>
            </div>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .custom-border {
            border: solid rgb(255, 61, 95);
        }
        .custom-bg {
            background: pink;
        }
    `]
})
export class AppComponent {}

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