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.Razor@(Html.Kendo().DropDownButton() .Name("DropDownButton") .Text("Plus") .Icon("plus") ) -
SpriteCssClass()—This method displays the icon as a background of a span element instead.Razor@(Html.Kendo().DropDownButton() .Name("DropDownButton") .Text("Plus") .SpriteCssClass("myPlusIcon") ) -
ImageUrl()—This method applies image icons.Razor@(Html.Kendo().DropDownButton() .Name("DropDownButton") .Text("Plus") .ImageUrl("url/to/myPlusIcon.png") )
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"); }) )