Icon Button

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

The Button HtmlHelper provides the following methods for configuring icons:

  • Icon()
  • SpriteCssClass()
  • ImageUrl()

Background Icons

Background icons are applied through the .Icon() or .SpriteCssClass() fluent methods and are displayed as a background of a span element. The difference between the two settings is that .Icon() is intended to be used for built-in Kendo UI icons which are part of the theme sprite. For a list of available icon names, refer to the demo on using the Kendo UI icons.

The following example demonstrates how to add a background icon by using .Icon().


        @(Html.Kendo().Button()
            .Name("cancelButton")
            .Icon("cancel")
            .Content("Cancel"))

        <%= Html.Kendo().Button()
            .Name("cancelButton")
            .Icon("cancel")
            .Content("Cancel") %>

The configuration from the previous example is expected to produce the HTML output from the following example.

    <button type="button" id="cancelButton" class="k-button k-button-icontext"><span class="k-icon k-cancel"></span>Cancel</button>

The following example demonstrates how to add a background icon by using .SpriteCssClass().


        @(Html.Kendo().Button()
            .Name("spriteButton")
            .SpriteCssClass("myIconClass")
            .Content("Sprite button"))

        <%= Html.Kendo().Button()
            .Name("spriteButton")
            .SpriteCssClass("myIconClass")
            .Content("Sprite button") %>

The configuration from the previous example is expected to produce the HTML output from the following example.

  <button type="button" id="spriteButton" class="k-button k-button-icontext"><span class="k-sprite myIconClass"></span>Sprite button</button>

Technically, you can use .SpriteCssClass("k-icon k-cancel") to achieve the same result as .Icon("cancel") but .Icon() avoids the need to set two CSS classes at the same time and provides a certain level of abstraction. The Button uses an existing span element if it is supplied as .Content()—for example, if you want to have a Button with no text. The span element must have a k-sprite CSS class.

The following example demonstrates how to use a button with no text.


        @(Html.Kendo().Button()
            .Name("deleteButton")
            .SpriteCssClass("myDeleteClass")
            .Content("<span class='k-sprite'>Delete</span>"))

        <%= Html.Kendo().Button()
            .Name("deleteButton")
            .SpriteCssClass("myDeleteClass")
            .Content("<span class='k-sprite'>Delete</span>") %>

Image Icons

Image icons are applied through the .ImageUrl() property and are displayed as an img element.

The following example demonstrates how to use .ImageUrl().


        @(Html.Kendo().Button()
            .Name("imageButton")
            .ImageUrl("/images/myIcon.gif")
            .Content("Image button"))

        <%= Html.Kendo().Button()
            .Name("imageButton")
            .ImageUrl("/images/myIcon.gif")
            .Content("Image button") %>

The configuration from the previous example is expected to produce the HTML output from the following example.

    <button type="button" id="imageButton" class="k-button k-button-icontext"><img class="k-image" src="/images/myIcon.gif" alt="icon" />Image button</button>

The following example demonstrates how to use .ImageUrl() with no text. You have to place an img tag inside the Button content. The image needs to have a k-image CSS class.


        @(Html.Kendo().Button()
            .Name("iconButton")
            .ImageUrl("/images/myIcon.gif")
            .Content("<img class='k-image' alt='my icon' />"))

        <%= Html.Kendo().Button()
            .Name("iconButton")
            .ImageUrl("/images/myIcon.gif")
            .Content("<img class='k-image' alt='my icon' />") %>

See Also

In this article
Not finding the help you need? Improve this article