SmartPasteButton Icons

Updated on Feb 6, 2026

You can enhance the visual content of the SmartPasteButton by adding icons to the component. By default, the SmartPasteButton displays a clipboard with sparkle icon, but you can customize it to match your application's design.

The SmartPasteButton provides the following options to set an icon inside the component:

• svgIcon—Sets an SVG icon inside the SmartPasteButton. For the full list of available icons, refer to the list of SVG icons supported by Kendo UI for Angular.
• icon—Sets a font icon inside the SmartPasteButton. For the full list of available icons, refer to the list of font icons supported by Kendo UI for Angular.
• iconClass—Displays an icon from a CSS class. Using the iconClass is suitable for rendering FontAwesome or other third-party font icons.
• imageUrl—Sets an image icon through a URL link.

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 Icon

To display an SVG icon inside the SmartPasteButton, 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';

@Component({
  // ...
})
export class AppComponent {
public svgMagicIcon: SVGIcon = magicIcon;
}

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

Change Theme

Theme

Loading ...

Font Icon

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, refer to the topic about icon settings.
2. Set the icon property to a font icon in the Kendo UI theme.

html

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

The following example demonstrates how to set the icon and iconClass properties of the SmartPasteButton.

Change Theme

Theme

Loading ...

Custom Icon Class

You can use the iconClass property to display icons from third-party libraries like FontAwesome.

html

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

The following example demonstrates using FontAwesome icons with the SmartPasteButton.

Change Theme

Theme

Loading ...

Image URL

To display an image from a URL link inside the SmartPasteButton, set the imageUrl property.

html

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

Suggested Links

• SmartPasteButton Appearance
• SmartPasteButton Configuration
• SmartPasteButton API Reference
• List of SVG Icons
• List of Font Icons