@progress/kendo-buttons-react-wrapper/docs/buttongroup/icons.md

Kendo UI Buttons wrapper for React

---
title: Icon ButtonGroup
page_title: Icon ButtonGroup - ButtonGroup - Kendo UI Wrappers for React
description: "Add images or predefined and custom icons to the Kendo UI ButtonGroup wrapper for React."
slug: icons_buttongroup
position: 3
---

# 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](#toc-predefined-icons)
* [Icon-only buttons](#toc-icon-only-buttons)

## Predefined Icons

You can use a set of ready-to-use Kendo UI icons. For the full list of predefined icons, refer to [this article](http://docs.telerik.com/kendo-ui/styles-and-layout/icons-web).

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.

```jsx-preview
class ButtonGroupContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <ButtonGroup>
                        <li data-icon='globe'>Option 1</li>
                        <li data-icon='mostrecent'>Option 2</li>
                    </ButtonGroup>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonGroupContainer />,
    document.querySelector('my-app')
);
```

## Icon-Only Buttons

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

```jsx
class ButtonGroupContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <ButtonGroup>
                        <li data-icon='play'></li>
                        <li data-icon='pause'></li>
                        <li data-icon='stop'></li>
                    </ButtonGroup>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonGroupContainer />,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI ButtonGroup for jQuery](https://demos.telerik.com/kendo-ui/buttongroup/index)
* [API Reference of the ButtonGroup Widget](https://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/buttongroup)