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

Icon Button

The Button can accommodate an icon which enhances the meaning of the text content.

The Button provides the following methods for configuring icons:

Icon()
SpriteCssClass()
ImageUrl()

Use only one of them with a particular Button instance. If you define multiple properties, only one of them will be obeyed according to the order stated above.

The Icon() method displays the appropriate Kendo UI for jQuery font icon as a content of a <spn> :before pseudo element. The Button enables you to completely omit any text to be specified for its contents.

Razor
	@(Html.Kendo().Button()
		.Name("textButton")
		.Icon("trash")
	)
Razor
	<kendo-button name="buttonDelete" type="button" icon="trash"></kendo-button>

Alternatively, use the IconClass option to set a custom icon. It accepts a CSS class (or multiple space-separated CSS classes).

Razor
	<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

	@(Html.Kendo().Button()
		.Name("buttonCustom")
		.IconClass("fa fa-magic")
	)
Razor
	<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

	<kendo-button name="buttonCustom" type="button" icon-class="fa fa-magic"></kendo-button>

The SpriteCssClass() method displays the icon as a background of a span element instead.

Razor
	@(Html.Kendo().Button()
		.Name("textButton")
		.Content("Sample Button")
		.SpriteCssClass("myDeleteIcon")
	)
Razor
	<kendo-button name="buttonEdit" type="button" sprite-css-class="myEditIcon"></kendo-button>

Image icons are applied by using the ImageUrl() method and are displayed as an img element.

Razor
	@(Html.Kendo().Button()
		.Name("textButton")
		.Content("Sample Button")
		.ImageUrl("url/to/myDeleteIcon.png")
	)
Razor
	<kendo-button name="buttonImage" type="button" image-url="/shared/icons/sports/snowboarding.png"></kendo-button>

Icon Button

See Also