RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.telerik.com/kendo-react-ui/components/buttons/button/icons below:

React Buttons Button Icon Button

New to KendoReact? Learn about KendoReact Free. 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.

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

SVG Icon Button

To display an SVG icon inside the Button set the svgIcon property of the Button to the necessary SVGIcon.

Change Theme

Theme

Loading ...

Font Icon Button

To display a font icon inside the Button, depending on the font icons library, you can set the:

icon property to a font icon in the Kendo UI theme.

html

<Button type="button" icon="calendar">Events</Button>

iconClass property to a third-party font icon library (such as FontAwesome).

html
```
<Button type="button" iconClass="fa fa-heart"/>
```

The following example demonstrates how to set the icon property of the Button.

Change Theme

Theme

Loading ...

The following example demonstrates how to set the iconClass property of the Button.

Change Theme

Theme

Loading ...

Image Icons

To display an image as the icon, use the imageUrl prop to pass the image path as URL.

Change Theme

Theme

Loading ...

Start and End Icons

To set a start or end icon, use the startIcon and endIcon props to pass an SVG icon or a custom element.

Change Theme

Theme

Loading ...