• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGrid
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

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:

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 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.

<kendo-button [svgIcon]="svgCart">Cart</kendo-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.

Example
View Source
Change Theme:

Font Icon Button

To display a Font icon inside the Button:

  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:

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

Example
View Source
Change Theme:

Using an Image URL

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

<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.

Example
View Source
Change Theme: