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

Kendo UI Buttons wrapper for React

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

# 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.

The Button provides the following styling options:
* [Background Icons](#toc-background-icons)
* [Image Icons](#toc-image-icons)

## Background Icons

To apply background icons to the Button, use either the `icon` or `spriteCssClass` property. The icons are displayed as the background of a `span` element. The `icon` option 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 [Web Font Icons](https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web) article.

The following example demonstrates how to add icons through the `icon` property.

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

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <Button icon='cancel'>
                        Kendo UI font icon
                    </Button>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonContainer />,
    document.querySelector('my-app')
);
```

The following example demonstrates how to add icons through the `spriteCssClass` property.

```html
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
```
```jsx
class ButtonContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <Button spriteCssClass='fa fa-key fa-fw'>
                        FontAwsome icon
                    </Button>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonContainer />,
    document.querySelector('my-app')
);
```

Technically, if you use `spriteCssClass="k-icon k-cancel"`, you will achieve the same result as if you use `icon="cancel"`. However, `icon` spares you the need to set two CSS classes at the same time and provides a certain level of abstraction.

## Image Icons

To apply image icons, use the `imageUrl` property. The icons are displayed as an `img` element.

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

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <Button imageUrl='https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'>
                        Image icon
                    </Button>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ButtonContainer />,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI Button for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/button/overview)
* [API Reference of the Button Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/button)