# Button Icon Options

You can enhance the textual content of the Button by displaying SVG icons, font icons, or images.

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

* [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#svgicon)—Displays an SVG icon inside the Button. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-vue-ui-develop/components/icons/svgicon/svgicon-list).
* [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#icon)—Displays a font icon from the Kendo UI theme. For available icons, refer to the [list of font icons](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/).
* [`iconClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#iconclass)—Displays an icon from a CSS class, such as a Font Awesome icon.
* [`imageUrl`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#imageurl)—Displays an image from a URL.
* [`endSvgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#endsvgicon) and [`endIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#endicon)—Displays an SVG or font icon after the Button text.

## SVG Icons

To display an SVG icon, set the [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#svgicon) property of the Button to the necessary [`SVGIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/svgicon).

```vue
<script setup>
import { Button } from '@progress/kendo-vue-buttons';
import { gearIcon } from '@progress/kendo-svg-icons';
</script>

<template>
    <Button :svg-icon="gearIcon" />
</template>
```

The following example demonstrates Buttons with default SVG icons.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/button/svg-icon/source.txt)

## Font Icons

To display a Font icon inside the Button:

1. [Load the font icons in your project](https://www.telerik.com/design-system/docs/foundation/iconography/font-icons/#usage) so that the icon renders as expected.
2. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#icon) property to a font icon in the Kendo UI theme.
     ```vue
     <Button icon="calendar">Events</Button>
     ```
   * [`iconClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#iconclass) property to a third-party font icon library (such as [FontAwesome](https://fontawesome.com/)).
     ```vue
     <Button icon-class="fa fa-heart" />
     ```

The following example demonstrates how to set the `icon` анд `iconClass` properties of the Button.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/button/font-icon/source.txt)

## Image URL

To display an image from a URL, set the [`imageUrl`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#imageurl) property of the Button.

```vue
<Button image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png">Golf</Button>
```

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/button/image-icon/source.txt)

## End Icon

To display an icon after the Button text, use the following props:

* [`endSvgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#endSvgIcon)—Sets an SVG icon after the Button text.
* [`endIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#endIcon)—Sets a font icon from the Kendo UI theme after the Button text. To render font icons, [set the icon type to `font`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon-settings).

```vue
<KButton :end-svg-icon="chevronRightIcon">Next</KButton>
```

You can also combine it with a custom leading icon configured through the [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#svgIcon) or [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#icon) prop.

```vue
<KButton :svg-icon="fileExcelIcon" :end-svg-icon="downloadIcon">Export Report</KButton>
```

The following example demonstrates how to set an SVG icon after the text of the Button by setting the `endSvgIcon` prop.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/button/end-icon/source.txt)

## Suggested Links

* [API Reference of the Button](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops)
* [Toggleable Button](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/button/toggleable)
* [Disabled Button](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/button/disabled-state)