---
title: Icon Button
page_title: Icon Button - Button - Kendo UI for Vue
description: "Add images or predefined and custom icons to the Kendo UI Button wrapper for Vue."
slug: icons_button_wrapper
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/buttons/button/icons/"
position: 3
---

<div><WrapperBanner link="/kendo-vue-ui/components/buttons/button/icons"></WrapperBanner></div>

# Icon Button

You can enhance the meaning of the context by adding an icon to the Button either through the `img` element or over a background icon, which is usually a sprite.

According to web standards, the use of background images is better, because the icon is a decoration and does not represent structural content. The Button supports three options which help configure icons&mdash;`icon`, `spriteCssClass`, and `imageUrl`. You can apply only one at a time.

{% meta height:250 %}
{% embed_file button/icon-button/main.vue preview %}
{% embed_file button/icon-button/main.js %}
{% endmeta %}

## Suggested Links

* [Kendo UI Button for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/button/overview)
* [API Reference of the Button Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/button)