Icon DropDownButton

You can enhance the textual content of the DropDownButton 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 DropDownButton provides options for:

  • Using the built-in KendoReact icons. They are applied through the icon property and displayed as a background for the DropDownButton. To see the full list of the web font icons in KendoReact, refer to the article on styles and layout.
  • Adding FontAwesome and other font icons. They are implemented by setting the required third-party CSS classes through the iconClass property.
  • Adding image icons. They are applied through the imageUrl property of the component.

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

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    const settings = [{
        text: 'My Profile'
    }, {
        text: 'Friend Requests'
    }, {
        text: 'Account Settings'
    }, {
        text: 'Support'
    }, {
        text: 'Log Out'
    }];
    const imageUrl = 'http://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png';
    const bookmarks = [{
        text: 'Show All'
    }, {
        text: 'Bookmark This Page'
    }, {
        text: 'Import'
    }, {
        text: 'Export'
    }];

    class ButtonContainer extends React.Component {
        render() {
            return (
                <div className="row example-wrapper">
                  <div className="col-xs-12 col-sm-6 example-col">
                    <p>KendoReact font icon</p>
                    <DropDownButton items={settings} icon="cog" text="User Settings" />
                    <DropDownButton items={settings} icon="cog" />
                  </div>
                  <div className="col-xs-12 col-sm-6 example-col">
                    <p>FontAwеsome icon</p>
                    <DropDownButton items={settings} iconClass="fa fa-cog fa-fw" text="User Settings" />
                    <DropDownButton items={settings} iconClass="fa fa-cog fa-fw" />
                  </div>
                  <div className="col-xs-12 col-sm-6 example-col">
                    <p>Image icon</p>
                    <DropDownButton items={bookmarks} imageUrl={imageUrl} text="Bookmarks" />
                    <DropDownButton items={bookmarks} imageUrl={imageUrl} />
                  </div>
                </div>
            );
        }
    }
    ReactDOM.render(
        <ButtonContainer/>,
        document.querySelector('my-app')
    );

In this article

Not finding the help you need?