# Icons

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

The ToggleButton provides the following methods for configuring icons:

* [`Icon()`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/icons#icon)—Defines a name of an existing icon in the Kendo UI theme sprite.
* [`SpriteCssClass()`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/icons#spriteclass)—Defines a CSS class (or multiple classes separated by spaces), which will be used for applying a background image to a span element inside the ToggleButton.
* [`ImageUrl()`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/icons#imageicons)—Defines a URL, which will be used for an `img ` element inside the ToggleButton.
* [`IconClass()`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/icons#iconclass)—Defines a CSS class or multiple classes which are applied to a span element inside the ToggleButton.

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

### Icon

The `Icon()` method displays the appropriate [Kendo UI for jQuery font icon](https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web) as a content of a `<spn> :before` pseudo element. The ToggleButton enables you to completely omit any text to be specified for its contents.

```Razor HtmlHelper
	@(Html.Kendo().ToggleButton()
		.Name("toggleButton")
		.Icon("calendar")
	)
```

### IconClass

Alternatively to the `Icon()` configuration, you can use the `IconClass()` configuration method 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().ToggleButton()
		.Name("toggleButton")
		.IconClass("fa fa-magic")
	)
```

### SpriteClass

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

```Razor HtmlHelper
	@(Html.Kendo().ToggleButton()
		.Name("toggleButton")
		.Content("Text ToggleButton")
		.SpriteCssClass("myDeleteIcon")
	)
```

### ImageIcons

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

```Razor HtmlHelper
	@(Html.Kendo().ToggleButton()
		.Name("toggleButton")
		.Content("Text ToggleButton")
		.ImageUrl("url/to/myDeleteIcon.png")
	)
```

## See Also

* [Adding Images to the ToggleButton HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/togglebutton/images)
* [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/togglebutton)