# FloatingActionButton Icon Options

You can enhance the content of the FloatingActionButton by displaying SVG icons or font icons. You can also combine an icon with a [text label](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/content-types) by setting the [`text`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#text) prop.

The FloatingActionButton supports the following icon options:

* [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#svgicon)—Displays an SVG icon. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-vue-ui-develop/components/icons/svgicon/svgicon-list#svg-icons-list).
* [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#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/floatingactionbuttonprops#iconclass)—Displays an icon from a CSS class, such as a [Font Awesome](https://fontawesome.com/) icon.

## SVG Icons

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

```vue
<template>
  <FloatingActionButton :svg-icon="bellIcon" text="Notifications"></FloatingActionButton>
</template>

<script setup>
import { FloatingActionButton } from "@progress/kendo-vue-buttons";
import { bellIcon } from "@progress/kendo-svg-icons";
</script>
```

The following example demonstrates an icon-only button, an icon with a text label, and a text-only button.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/floatingactionbutton/content-types/source.txt)

## Font Icons

To display a Font icon inside the FloatingActionButton:

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/floatingactionbuttonprops#icon) property to a font icon in the Kendo UI theme.

     ```vue
     <FloatingActionButton icon="bell" text="Notifications"></FloatingActionButton>
     ```
   * [`iconClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops#iconclass) property to a third-party font icon library (such as [FontAwesome](https://fontawesome.com/)).

     ```vue
     <FloatingActionButton icon-class="fa fa-bell" text="Notifications"></FloatingActionButton>
     ```

The following example demonstrates a Kendo UI theme font icon and a Font Awesome icon.

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

## Suggested Links

* [API Reference of the FloatingActionButton](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/floatingactionbuttonprops)
* [Content Types](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/content-types)
* [Customization](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/floatingactionbutton/customization)
* [Icon Component](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon)