• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Icon Button

You can enhance the textual content of the Button by adding image, predefined, or custom icons to it.

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 options for:

  • Using the built-in KendoReact icons. The built-in icons are applied through the icon property and displayed as a background for the Button. To see the full list of the web font icons in KendoReact, refer to the article on styles and layout.
  • Adding image icons. They are applied through the imageUrl property of the component.
  • Adding FontAwesome and other font icons. They are implemented by setting the required third-party CSS classes through the iconClass property.
  • Adding icons before and after the Button content by setting startIcon and endIcon properties.

Wse startIcon and endIcon with SVGIcon or small span type elements.

The following example demonstrates how to use the different types of icons in a Button.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
      .k-button + .k-button {
          margin-left: 5px
      }
    </style>
Example
View Source
Change Theme:

In this article

Not finding the help you need?