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
iconproperty and displayed as a background for the Button. To see the full list of the web font icons in KendoReact, refer to the article onstyles and layout. - Adding image icons. They are applied through the
imageUrlproperty of the component. - Adding FontAwesome and other font icons. They are implemented by setting the required third-party CSS classes through the
iconClassproperty. - Adding icons before and after the Button content by setting
startIconandendIconproperties.
Use
startIconandendIconwith SVGIcon or small span type elements.
SVG Icon Button
To display an SVG icon inside the Button set the svgIcon property of the Button to the necessary SVGIcon.
Font Icon Button
To display a font icon inside the Button, depending on the font icons library, you can set the:
-
iconproperty to a font icon in the Kendo UI theme.html<Button type="button" icon="calendar">Events</Button> -
iconClassproperty to a third-party font icon library (such as FontAwesome).html<Button type="button" iconClass="fa fa-heart"/>
The following example demonstrates how to set the icon property of the Button.
The following example demonstrates how to set the iconClass property of the Button.
Image Icons
To display an image as the icon, use the imageUrl prop to pass the image path as URL.
Start and End Icons
To set a start or end icon, use the startIcon and endIcon props to pass an SVG icon or a custom element.