# 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-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#svgicon)—Displays an SVG icon. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-angular-ui-develop/components/icons/svgicon/svgicon-list).
* [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#icon)—Displays a font icon from the Kendo UI theme. For available icons, refer to the [list of font icons](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon/icon-list).
* [`iconClass`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#iconclass)—Displays an icon from a CSS class, such as a [FontAwesome](https://fontawesome.com/) icon.
* [`imageUrl`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#imageurl)—Displays an image from a URL.
* [`endSvgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#endsvgicon) and [`endIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#endicon)—Displays an SVG or font icon after the SmartPasteButton text.

> As of R2 2023 (`v13.0.0`) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from `font` to `svg`. Set the `svgIcon` property, or [Continue Using Font Icons](https://www.telerik.com/kendo-angular-ui-develop/components/styling/migrating-font-svg#continue-using-font-icons).

## SVG Icons

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

```html example.component.html
<button 
  kendoSmartPasteButton 
  [svgIcon]="svgMagicIcon">
  Smart Paste
</button>
```

```ts example.component.ts
import { magicIcon, SVGIcon } from '@progress/kendo-svg-icons';

public svgMagicIcon: SVGIcon = magicIcon;
```

The following example demonstrates how to set an SVG icon inside the SmartPasteButton.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/smartpastebutton/icon/svg-icon/source.txt)

## Font Icons

To display a Font icon inside the SmartPasteButton:

1. Use the [`ICON_SETTINGS`](https://www.telerik.com/kendo-angular-ui-develop/components/icons/api/icon_settings) token of the Icons package and set the icon type to `font`. For more information, go to the topic about [icon settings](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon-settings#using-font-icons).
2. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#icon) property to a font icon in the Kendo UI theme.
     ```html
     <button kendoSmartPasteButton icon="paste">
       Smart Paste
     </button>
     ```
   * [`iconClass`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#iconclass) property to a third-party font icon library (such as [FontAwesome](https://fontawesome.com/)).
     ```html
     <button kendoSmartPasteButton iconClass="fa fa-magic">
       Smart Paste
     </button>
     ```

The following example demonstrates how to set a font icon inside the SmartPasteButton.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/smartpastebutton/icon/font-icon/source.txt)

The following example demonstrates using FontAwesome icons with the SmartPasteButton.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/smartpastebutton/icon/fontawesome-icon/source.txt)

## Image URL

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

```html
<button 
  kendoSmartPasteButton 
  imageUrl="https://example.com/icons/ai-icon.png">
  Smart Paste
</button>
```

## End Icon

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

* [`endSvgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#endsvgicon)—Sets an [`SVGIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/icons/api/svgicon) after the SmartPasteButton text.
* [`endIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#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-angular-ui-develop/components/icons/icon-settings).

```html
<button
    kendoSmartPasteButton
    [endSvgIcon]="svgNext">
    Smart Paste
</button>
```

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-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#svgicon) or [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#icon) property.

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

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

## Suggested Links

* [SmartPasteButton Appearance](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/smartpastebutton/appearance)
* [SmartPasteButton Configuration](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/smartpastebutton/configuration)
* [API Reference of the SmartPasteButton](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent)
* [Icon Settings](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon-settings)