FloatingActionButton Icon Options

Updated on Nov 11, 2026

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 by setting the text prop.

The FloatingActionButton supports the following icon options:

• svgIcon—Displays an SVG icon. For available icons, refer to the list of SVG icons.
• icon—Displays a font icon from the Kendo UI theme. For available icons, refer to the list of font icons.
• iconClass—Displays an icon from a CSS class, such as a Font Awesome icon.

SVG Icons

To display an SVG icon, set the svgIcon property to the necessary 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.

Example

View Source

Loading ...

Font Icons

To display a Font icon inside the FloatingActionButton:

1. Load the font icons in your project so that the icon renders as expected.
2. Depending on the font icons library, you can set the:

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

     vue

     <FloatingActionButton icon="bell" text="Notifications"></FloatingActionButton>

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

     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.

Example

View Source

Loading ...

Suggested Links

• API Reference of the FloatingActionButton
• Content Types
• Customization
• Icon Component