# 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](https://www.telerik.com/kendo-react-ui/components/styling/icons). The built-in icons are applied through the [`icon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#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`](https://www.telerik.com/kendo-react-ui/components/styling/icons).
* Adding image icons. They are applied through the [`imageUrl`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#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`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#iconclass) property.
* Adding React content before and after the Button content with [`prefix`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#prefix) and [`suffix`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#suffix).

> Use `prefix` and `suffix` with non-interactive content, such as [SVGIcon](https://www.telerik.com/kendo-react-ui/components/common/api/svgicon), text, or small [span](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) elements.

To display an SVG icon, set the [`svgIcon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#svgicon) property of the Button to the necessary [`SVGIcon`](https://www.telerik.com/kendo-react-ui/components/common/api/svgicon).

```tsx
import { gearIcon } from '@progress/kendo-svg-icons';

<Button svgIcon={gearIcon} />;
```

The following example demonstrates Buttons with default and variant SVG icons.

[Demo Source](https://demos.telerik.com/kendo-react-ui/buttons/button/icons/svg/source.txt)

To render a `solid`, `outline`, or `duotone` variant, pass a [`SvgIcon`](https://www.telerik.com/kendo-react-ui/components/common/api/svgicon) component through [`prefix`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#prefix) or [`suffix`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#suffix). The [`fillMode`](https://www.telerik.com/kendo-react-ui/components/buttons/button/appearance#fill-mode) 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:

```tsx
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-icons` version 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:

1. [Load the font icons in your project](https://www.telerik.com/design-system/docs/foundation/iconography/font-icons/#usage) so that the icon renders as expected.
2. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#icon) property to a font icon in the Kendo UI theme.
     ```tsx
     <Button icon="calendar">Events</Button>
     ```
   * [`iconClass`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#iconclass) property to a third-party font icon library (such as [FontAwesome](https://fontawesome.com/)).
     ```tsx
     <Button iconClass="fa fa-heart" />
     ```

The following example demonstrates how to set the `icon` property of the Button.

[Demo Source](https://demos.telerik.com/kendo-react-ui/buttons/button/icons/icon/source.txt)

The following example demonstrates how to set the `iconClass` property of the Button.

[Demo Source](https://demos.telerik.com/kendo-react-ui/buttons/button/icons/iconClass/source.txt)

## Image URL

To display an image from a URL, set the [`imageUrl`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#imageurl) property of the Button.

```tsx
<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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/buttons/button/icons/imageurl/source.txt)

## Prefix and Suffix Content

Use [`prefix`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#prefix) and [`suffix`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/buttons/button/icons/startendicons/source.txt)

## End Icon

To display an icon after the Button text, use the following props:

* [`endSvgIcon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#endsvgicon)—Sets an SVG icon after the Button text.
* [`endIcon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#endicon)—Sets a font icon from the Kendo UI theme after the Button text. To render font icons, [set the icon type to `font`](https://www.telerik.com/kendo-react-ui/components/styling/migrating-font-svg#continue-using-font-icons).

You can combine a trailing icon with the existing [`svgIcon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#svgicon) or [`icon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops#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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/buttons/button/icons/end-icon/source.txt)

## Suggested Links

* [API Reference of the Button](https://www.telerik.com/kendo-react-ui/components/buttons/api/buttonprops)
* [Toggleable Button](https://www.telerik.com/kendo-react-ui/components/buttons/button/toggleable)
* [Disabled Button](https://www.telerik.com/kendo-react-ui/components/buttons/button/disabled-state)
* [Integration with Styled Components](https://www.telerik.com/kendo-react-ui/components/knowledge-base/styled-components)