New to Telerik UI for ASP.NET Core? Download free 30-day trial

Icons

The DropDownButton provides the Icon, SpriteCssClass, and ImageUrl properties for configuring icons. With a specific DropDownButton instance, you have to use only one of them—if you define multiple properties, the DropDownButton will work with only one of them in the order previously stated.

  • Icon()—This method displays the appropriate Kendo UI font icon.

        @(Html.Kendo().DropDownButton()
            .Name("DropDownButton")
            .Text("Plus")
            .Icon("plus")
        )
    
        <kendo-dropdownbutton name="DropDownButton" text="Plus" icon="plus">
        </kendo-dropdownbutton>
    
  • SpriteCssClass()—This method displays the icon as a background of a span element instead.

        @(Html.Kendo().DropDownButton()
            .Name("DropDownButton")
            .Text("Plus")
            .SpriteCssClass("myPlusIcon")
        )
    
        <kendo-dropdownbutton name="DropDownButton" text="Plus" sprite-css-class="myPlusIcon">
        </kendo-dropdownbutton>
    
  • ImageUrl()—This method applies image icons.

        @(Html.Kendo().DropDownButton()
                .Name("DropDownButton")
                .Text("Plus")
                .ImageUrl("url/to/myPlusIcon.png")
        )
    
    
        <kendo-dropdownbutton name="DropDownButton" text="Plus" image-url="url/to/myPlusIcon.png">
        </kendo-dropdownbutton>
    

Font Icons

You can integrate FontAwesome or other font icons by setting the required third-party CSS classes over the .SpriteCssClass() configuration method. However, this approach will render a k-sprite CSS class, which applies font and size styles that may interfere with the font icon styles.

    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
    <style>
        .k-button .fa {
            font-size: inherit;
            line-height: inherit;
            width: auto;
            height: auto;
            margin-left: 0;
        }
    </style>

    @(Html.Kendo().DropDownButton()
        .Name("DropDownButton")
        .Text("Archive")
        .SpriteCssClass("fa fa-archive")
        .Items(items =>
        {
            items.Add().Text("Item 1");
            items.Add().Text("Item 2");
        })
    )
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
    <style>
        .k-button .fa {
            font-size: inherit;
            line-height: inherit;
            width: auto;
            height: auto;
            margin-left: 0;
        }
    </style>

    <kendo-dropdownbutton name="DropDownButton" text="Archive" sprite-css-class="fa fa-archive">
        <dropdownbutton-items>
            <item text="Item 1"></item>
            <item text="Item 2"></item>
        </dropdownbutton-items>
    </kendo-dropdownbutton>

See Also

In this article