Icon ToggleButton
The ToggleButton can accommodate an icon which enhances the meaning of the text content.
The ToggleButton provides the following methods for configuring icons:
-
Icon()
—Defines a name of an existing icon in the Kendo UI theme sprite. -
SpriteCssClass()
—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()
—Defines a URL, which will be used for animg
element inside the ToggleButton. -
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 as a content of a <spn> :before
pseudo element. The ToggleButton enables you to completely omit any text to be specified for its contents.
@(Html.Kendo().ToggleButton()
.Name("toggleButton")
.Icon("calendar")
)
<kendo-togglebutton name="toggleButton"
icon="calendar">
</kendo-togglebutton>
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).
<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")
)
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<kendo-togglebutton name="toggleButton"
icon-class="fa fa-magic">
</kendo-togglebutton>
SpriteClass
The SpriteCssClass()
method displays the icon as a background of a span
element instead.
@(Html.Kendo().ToggleButton()
.Name("toggleButton")
.Content("Text ToggleButton")
.SpriteCssClass("myDeleteIcon")
)
<kendo-togglebutton name="toggleButton"
sprite-css-class="myDeleteIcon">
Text ToggleButton
</kendo-togglebutton>
ImageIcons
Image icons are applied by using the ImageUrl()
method and are displayed as an img
element.
@(Html.Kendo().ToggleButton()
.Name("toggleButton")
.Content("Text ToggleButton")
.ImageUrl("url/to/myDeleteIcon.png")
)
<kendo-togglebutton name="buttonImage"
image-url="/shared/icons/sports/snowboarding.png">
</kendo-togglebutton>