All Components

Icon ButtonGroup

You can enhance the meaning of the context by adding an icon to the buttons within the ButtonGroup.

The ButtonGroup allows the use of:

Predefined Icons

You can use a set of ready-to-use Kendo UI font icons. For the full list of predefined font icons, refer to this article.

To set a Button icon, either:

  • Add an img element inside the <li> element of the Button, or
  • Set a data-icon attribute to the <li> element of the Button.

The following example demonstrates how to implement font icons by using the data-icon attribute.

<div id="vueapp" class="vue-app">
    <div class="row">
        <kendo-buttongroup :index="0">
            <kendo-buttongroup-button data-icon="globe">Option 1</kendo-buttongroup-button>
            <kendo-buttongroup-button data-icon="user">Option 2</kendo-buttongroup-button>
        </kendo-buttongroup>
    </div>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp"
})

Icon-Only Buttons

To implement icon-only buttons within a ButtonGroup, do not set any text to the component.

<div id="vueapp" class="vue-app">
    <kendo-buttongroup :index="3">
        <kendo-buttongroup-button data-icon="play"></kendo-buttongroup-button>
        <kendo-buttongroup-button data-icon="rewind"></kendo-buttongroup-button>
        <kendo-buttongroup-button data-icon="forward"></kendo-buttongroup-button>
        <li data-icon="globe"></li>
    </kendo-buttongroup>
</div>
Vue.use(ButtonsInstaller);

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