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 theiconClass
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 fromfont
tosvg
. Set thesvgIcon
property, or Continue Using Font Icons.
SVG Icon Button
To display an SVG icon inside the Button 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.
<button kendoButton [svgIcon]="svgCart">Cart</button>
import { cartIcon, SVGIcon } from '@progress/kendo-svg-icons';
public svgCart: SVGIcon = cartIcon;
The following example demonstrates how to set an SVG icon inside the Button.
Font Icon Button
To display a Font icon inside the Button:
- Use the
ICON_SETTINGS
token of the Icons package and set the icon type tofont
. For more information, go to the topic about icon settings. - Depending on the font icons library, you can set the:
icon
property to a font icon in the Kendo UI theme. For details, go to the list of font icons supported by Kendo UI for Angular.html<button kendoButton icon="calendar">Events</button>
iconClass
property to a third-party font icon library (such as FontAwesome).html<button kendoButton iconClass="fa fa-taxi">Take a Taxi</button>
The following example demonstrates how to set the icon
and iconClass
properties of the Button.
Using an Image URL
To display an image from a URL link inside the Button, set the imageUrl
property of the component.
<button kendoButton imageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png" >Take a Taxi</button>
The following example demonstrates the imageUrl
property of the Button in action.