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 KendoReact icons. The built-in icons 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 KendoReact, refer to the article on styles and layout.
  • Adding image icons. They are applied through the imageUrl property of the component.
  • Adding FontAwesome and other font icons. They are implemented by setting the required third-party CSS classes through the iconClass property.

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

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
      .k-button + .k-button {
          margin-left: 5px
      }
    </style>
    class ButtonContainer extends React.Component {
        render() {
            return ([
                (
                    <Button icon="refresh">KendoReact font icon</Button>
                ),
                (
                    <Button imageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Image icon</Button>
                ),
                (
                    <Button iconClass="fa fa-key fa-fw">FontAwsome icon</Button>
                )
                ])
        }
    }
    ReactDOM.render(
        <ButtonContainer/>,
        document.querySelector('my-app')
    );

In this article

Not finding the help you need?