Icon Button

You can enhance the textual content of the Button by adding image, predefined, or custom icons to it.

With a view to the web standards, it is better to use a background image because icons are used for decoration and not for representing structural content.

The Button provides options for:

  • Using the built-in Kendo UI icons. They are applied through the icon property and displayed as a background for the Button. To see the full list of the web font icons in Kendo UI, refer to the article on styles and layout.
  • Adding FontAwesome and other font icons. They are implemented by setting the required third-party CSS classes through the iconClass property.
  • Adding image icons. They are applied through the imageUrl property of the component.

The following example demonstrates how to use the different types of icons in a Button.

    selector: 'my-app',
    template: `
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-4 example-col">
            <p>Kendo UI font icon</p>
            <button kendoButton [icon]="'calendar'">Events</button>
            <button kendoButton [icon]="'calendar'"></button>

          <div class="col-xs-12 col-sm-6 col-md-4 example-col">
            <p>FontAwsome icon</p>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
            <button kendoButton [iconClass]="'fa fa-calendar fa-fw'">Events</button>
            <button kendoButton [iconClass]="'fa fa-calendar fa-fw'"></button>

          <div class="col-xs-12 col-sm-6 col-md-4 example-col">
            <p>Image icon</p>
            <button kendoButton [imageUrl]="'https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'">Snowboarding</button>
            <button kendoButton [imageUrl]="'https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'"></button>
class AppComponent {}

In this article