All Components

Icon Button

You can enhance the meaning of the context by adding an icon to the Button either through the img element or over a background icon, which is usually a sprite.

According to web standards, the use of background images is better, because the icon is a decoration and does not represent structural content. The Button supports three options which help configure icons—icon, spriteCssClass, and imageUrl. You can apply only one at a time.

<div id="vueapp" class="vue-app">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 example-col">
            <p>Background Icon</p>
            <kendo-button icon="cancel">Cancel</kendo-button>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3 example-col">
            <p>Image icon</p>
            <kendo-button image-url="https://demos.telerik.com/kendo-ui/content/web/16x16/Chart.png">Chart</kendo-button>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3 example-col">
            <p>Icon-Only</p>
           <kendo-button icon="refresh"></kendo-button>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3 example-col">
            <p>Font icon</p>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
            <kendo-button sprite-css-class="fa fa-calendar fa-fw">Calendar</kendo-button>
        </div>
    </div>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp"
})
In this article