# 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-vue-ui-develop/components/buttons/api/smartpastebuttonprops#svgIcon)—Displays an SVG icon. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-vue-ui-develop/components/icons/svgicon/svgicon-list).
* [`icon`](https://www.telerik.com/kendo-vue-ui-develop/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-vue-ui-develop/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-vue-ui-develop/components/buttons/api/smartpastebuttonprops#imageUrl)—Displays an image from a URL.
* [`endSvgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpastebuttonprops#endsvgicon) and [`endIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpastebuttonprops#endicon)—Displays an SVG or font icon after the SmartPasteButton text.

## SVG Icons

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

```vue
<script setup>
import { SmartPasteButton } from '@progress/kendo-vue-buttons';
import { sparklesIcon } from '@progress/kendo-svg-icons';
</script>

<template>
    <SmartPasteButton :svg-icon="sparklesIcon">Smart Paste</SmartPasteButton>
</template>
```

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

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

## Image URL

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

```vue
<SmartPasteButton :image-url="'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-vue-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-vue-ui-develop/components/buttons/api/smartpastebuttonprops#endsvgicon)—Sets an SVG icon after the SmartPasteButton text.
* [`endIcon`](https://www.telerik.com/kendo-vue-ui-develop/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-vue-ui-develop/components/icons/icon-settings).

The end icon does not replace the default clipboard with sparkle icon. You can also combine it with a custom leading icon configured through the [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpastebuttonprops#svgicon) or [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpastebuttonprops#icon) prop.

The following example demonstrates how to set an SVG icon after the text of the SmartPasteButton by setting the `endSvgIcon` prop.

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

## Suggested Links

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