# SmartPasteButton Icon Options

You can enhance the visual content of the SmartPasteButton by displaying SVG icons, font icons, or images. By default, the SmartPasteButton displays a clipboard with sparkle icon, but you can replace it to match your application design.

The SmartPasteButton supports the following icon options:

* [`svgIcon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/smartpastebuttonprops#svgIcon)—Displays an SVG icon. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-react-ui/components/common/svgicon#svg-icons-list).
* [`icon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/smartpastebuttonprops#icon)—Displays a font icon from the Kendo UI theme. For available icons, refer to the [list of font icons](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/).
* [`iconClass`](https://www.telerik.com/kendo-react-ui/components/buttons/api/smartpastebuttonprops#iconClass)—Displays an icon from a CSS class, such as a [Font Awesome](https://fontawesome.com/) icon.
* [`imageUrl`](https://www.telerik.com/kendo-react-ui/components/buttons/api/smartpastebuttonprops#imageUrl)—Displays an image from a URL.

## SVG Icons

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

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

<SmartPasteButton svgIcon={sparklesIcon}>Smart Paste</SmartPasteButton>;
```

The following example demonstrates the default icon and a custom SVG icon.

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

## Font Icons

To display a Font icon inside the SmartPasteButton:

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/smartpastebuttonprops#icon) property to a font icon in the Kendo UI theme.
     ```tsx
     <SmartPasteButton icon="paste">Smart Paste</SmartPasteButton>;
     ```
   * [`iconClass`](https://www.telerik.com/kendo-react-ui/components/buttons/api/smartpastebuttonprops#iconClass) property to a third-party font icon library (such as [FontAwesome](https://fontawesome.com/)).
     ```tsx
     <SmartPasteButton iconClass="fa fa-magic">Smart Paste</SmartPasteButton>;
     ```

## Image URL

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

```tsx
<SmartPasteButton imageUrl="https://example.com/icons/settings.png">Smart Paste</SmartPasteButton>;
```

The following example demonstrates the font icon, icon class, and image URL options.

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

## End Icon

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

* [`endSvgIcon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/smartpastebuttonprops#endsvgicon)—Sets an SVG icon after the SmartPasteButton text.
* [`endIcon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/smartpastebuttonprops#endicon)—Sets a font icon from the Kendo UI theme after the SmartPasteButton 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).

The end icon does not replace the default paste icon. You can combine it with a custom leading icon configured through [`svgIcon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/smartpastebuttonprops#svgicon) or [`icon`](https://www.telerik.com/kendo-react-ui/components/buttons/api/smartpastebuttonprops#icon). The `prefix` and `suffix` props let you add custom React content before and after the button content.

The following example demonstrates how to set SVG and font icons after the text of the SmartPasteButton, and how to combine an end icon with a custom leading icon.

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

## Suggested Links

* [SmartPasteButton Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/smartpaste/appearance)
* [SmartPasteButton Configuration](https://www.telerik.com/kendo-react-ui/components/buttons/smartpaste/configuration)
* [API Reference of the SmartPasteButton](https://www.telerik.com/kendo-react-ui/components/buttons/api/smartpastebuttonprops)
* [Icon Component](https://www.telerik.com/kendo-react-ui/components/common/icon)