SmartPasteButton Icon Options

Updated on Nov 6, 2026

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—Displays an SVG icon. For available icons, refer to the list of SVG icons.
• icon—Displays a font icon from the Kendo UI theme. For available icons, refer to the list of font icons.
• iconClass—Displays an icon from a CSS class, such as a FontAwesome icon.
• imageUrl—Displays an image from a URL.
• endSvgIcon and 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.

SVG Icons

To display an SVG icon, set the svgIcon property to the necessary SVGIcon.

html

<button 
  kendoSmartPasteButton 
  [svgIcon]="svgMagicIcon">
  Smart Paste
</button>

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.

Example

View Source

Loading ...

Font Icons

To display a Font icon inside the SmartPasteButton:

1. Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
2. Depending on the font icons library, you can set the:
   • icon property to a font icon in the Kendo UI theme.
     html

     <button kendoSmartPasteButton icon="paste">
       Smart Paste
     </button>

   • iconClass property to a third-party font icon library (such as FontAwesome).
     html

     <button kendoSmartPasteButton iconClass="fa fa-magic">
       Smart Paste
     </button>

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

Example

View Source

Loading ...

The following example demonstrates using FontAwesome icons with the SmartPasteButton.

Example

View Source

Loading ...

Image URL

To display an image from a URL, set the 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—Sets an SVGIcon after the SmartPasteButton text.
• endIcon—Sets a font icon from the Kendo UI theme after the SmartPasteButton text. To render font icons, set the icon type to font.

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 or icon property.

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

Example

View Source

Loading ...

Suggested Links

• SmartPasteButton Appearance
• SmartPasteButton Configuration
• API Reference of the SmartPasteButton
• Icon Settings