# 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 a built-in Kendo UI icon in the Button. In current releases, the icon is rendered as SVG by default. The Button enables you to completely omit any text to be specified for its contents. For more information about SVG icons, see [SVG Icons](https://www.telerik.com/aspnet-core-ui/documentation/styles-and-layout/sass-themes/svg-icons).

For Telerik UI for ASP.NET Core, the icon behavior follows the Telerik UI release and does not use a separate .NET Core icon version. SVG icons were introduced in the R1 SP1 2023 release, and SVG became the default icon type in R2 2023. Font icons remain supported and can be selected through the server-side `IconType.Font` setting or the client-side `iconType: "font"` configuration. For more information, see [Migrating from Font Icons to SVG Icons](https://www.telerik.com/aspnet-core-ui/documentation/styles-and-layout/sass-themes/font-icons-migration).

```Razor HtmlHelper
	@(Html.Kendo().Button()
		.Name("textButton")
		.Icon("trash")
	)
```

```Razor TagHelper
	<kendo-button name="buttonDelete" type="button" icon="trash"></kendo-button>
```

If you are creating a button-like anchor instead of a Button component, use `kendo.ui.icon` to render a standalone SVG icon. The method inserts the SVG markup into the target element.

```JS dojo
<a href="/products" class="k-button">
	<span id="productsIcon" class="k-button-icon"></span>
	<span class="k-button-text">Products</span>
</a>

<script>
	kendo.ui.icon($("#productsIcon"), { icon: "plus", type: "svg" });
</script>
```

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

```Razor HtmlHelper
	<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 TagHelper
	<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 HtmlHelper
	@(Html.Kendo().Button()
		.Name("textButton")
		.Content("Sample Button")
		.SpriteCssClass("myDeleteIcon")
	)
```

```Razor TagHelper
	<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 HtmlHelper
	@(Html.Kendo().Button()
		.Name("textButton")
		.Content("Sample Button")
		.ImageUrl("url/to/myDeleteIcon.png")
	)
```

```Razor TagHelper
	<kendo-button name="buttonImage" type="button" image-url="/shared/icons/sports/snowboarding.png"></kendo-button>
```

## See Also

* [Adding Images to the Button HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/button/images)
* [Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/button)