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 onstyles 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
andendIcon
properties.
Use
startIcon
andendIcon
with 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:
-
icon
property to a font icon in the Kendo UI theme.html<Button type="button" icon="calendar">Events</Button>
-
iconClass
property 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.