Button Icon Options
You can enhance the textual content of the Button by displaying SVG icons, font icons, or images.
The Button provides the following options to set an image or icon inside the component:
- 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 React content before and after the Button content with
prefixandsuffix.
Use
prefixandsuffixwith non-interactive content, such as SVGIcon, text, or small span elements.
To display an SVG icon, set the svgIcon property of the Button to the necessary SVGIcon.
import { gearIcon } from '@progress/kendo-svg-icons';
<Button svgIcon={gearIcon} />;The following example demonstrates Buttons with default and variant SVG icons.
To render a solid, outline, or duotone variant, pass a SvgIcon component through prefix or suffix. The fillMode property styles the Button container and does not change the SVG glyph.
The following snippet renders a Button with the solid variant of an SVG icon:
import { Button } from '@progress/kendo-react-buttons';
import { SvgIcon } from '@progress/kendo-react-common';
import { starIcon } from '@progress/kendo-svg-icons';
<Button prefix={<SvgIcon icon={starIcon} variant="solid" />}>Solid</Button>;SVG icon variants require
@progress/kendo-svg-iconsversion 5.0.0 or later. If an icon does not provide the requested variant, its default content is rendered.
Font Icons
To display a Font icon inside the Button:
- Load the font icons in your project so that the icon renders as expected.
- Depending on the font icons library, you can set the:
iconproperty to a font icon in the Kendo UI theme.tsx<Button icon="calendar">Events</Button>iconClassproperty to a third-party font icon library (such as FontAwesome).tsx<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 URL
To display an image from a URL, set the imageUrl property of the Button.
<Button imageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png">Golf</Button>The following example demonstrates the imageUrl property of the Button in action.
Prefix and Suffix Content
Use prefix and suffix to pass React content before and after the normal Button content.
These properties replace the former startIcon and ReactNode endIcon properties.
The prefix appears before the leading icon, and the suffix appears after any trailing icon.
The following example demonstrates how to set the prefix and suffix props of the Button.
End Icon
To display an icon after the Button text, use the following props:
endSvgIcon—Sets an SVG icon after the Button text.endIcon—Sets a font icon from the Kendo UI theme after the Button text. To render font icons, set the icon type tofont.
You can combine a trailing icon with the existing svgIcon or icon prop. The prefix and suffix props let you add custom React content before and after the Button content. Content renders in this order: prefix, leading icon, text, trailing icon, suffix.
The following example demonstrates how to set an SVG icon and a font icon after the Button text, combine an end icon with a leading icon, and use end icons in a ButtonGroup.