Icon Button

You can enhance the textual content of the Button by displaying an image, predefined or custom icon, and SVG icons to the component.

With a view to the web standards, it is better to use a background image because icons are used for decoration and not for representing structural content.

The Button provides the following options to set an image or icon inside the component:

• icon—Sets an icon inside the Button. For the full list of available icons, go to the list of font icons supported by Kendo UI for Angular.
• svgIcon—Sets an SVG icon inside the Button. For the full list of available icons, go to the list of SVG 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.

Font Icon Button

To display a font icon inside the Button, use the list of font icons supported by Kendo UI for Angular and set the icon property of the component to the necessary icon name.

Copy Code<kendo-button icon="calendar">Events</kendo-button>

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

SVG Icon Button

To display an SVG icon inside the Button:

1. Use the ICON_SETTINGS token of the Icons package and set the icon type to svg. For more information, go to the topic about icon settings.

2. Set the svgIcon property of the Button to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.

   Copy Code<kendo-button [svgIcon]="svgCart">Cart</kendo-button>

   Copy Codeimport { cartIcon, SVGIcon } from '@progress/kendo-svg-icons';
   
   public svgCart: SVGIcon = cartIcon;

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

Using the Icon Class

To display an icon inside the component, you can also set the iconClass property of the Button to CSS classes. This approach is especially useful when you want to consume third-party icon libraries like FontAwesome.

Copy Code<kendo-button iconClass="fa fa-taxi">Take a Taxi</kendo-button>

The following example demonstrates how to display FontAwesome icons inside the Button.

Using an Image URL

To display an image from a URL link inside the Button, set the imageUrl property of the component.

Copy Code<kendo-button imageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png" >Take a Taxi</kendo-button>

The following example demonstrates the imageUrl property of the Button in action.

Suggested Links

• API Reference of the Button
• Disabled Button
• Toggleable Button
• Icon Settings