New to KendoReact? Start a free 30-day trial

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.
Adding icons before and after the Button content by setting startIcon and endIcon properties.

Wse startIcon and endIcon with SVGIcon or small span type elements.

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

html

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

Change Theme

Theme

Loading ...

Icon Button

Suggested Links