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

• Icons in the DropDownButton (Demo)
• Server-Side API