New to Kendo UI for Angular? Start a free 30-day trial

Icon FloatingActionButton

You can enhance the textual content of the FloatingActionButton by adding predefined or custom icons and SVG icons to the component.

The Icon FloatingActionButton can display the button with an icon indicator, a text label, or a combination of both.

The FloatingActionButton provides the following options to set an icon inside the component:

icon—Sets an icon inside the FloatingActionButton. For the full list of available icons, go to the list of font icons supported by Kendo UI for Angular.
svgIcon—Sets an SVG icon inside the FloatingActionButton. For the full list of available icons, go to the list of SVG icons supported by Kendo UI for Angular.
iconClass—Displays an icon from a CSS class. Using the iconClass is suitable for rendering FontAwesome or other third-party font icons.

As of R2 2023 (v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. Set the svgIcon property, or Continue Using Font Icons.

SVG Icon FloatingActionButton

To display an SVG icon inside the FloatingActionButton, set the svgIcon property of the FloatingActionButton to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.

html

<kendo-floatingactionbutton [svgIcon]="svgInfo" ... > </kendo-floatingactionbutton>

import { infoCircleIcon, SVGIcon } from '@progress/kendo-svg-icons';

public svgInfo: SVGIcon = infoCircleIcon;

The following example demonstrates how to set an SVG icon inside the FloatingActionButton.

Change Theme

Theme

Loading ...

Font Icon FloatingActionButton

To display a Font icon inside the FloatingActionButton:

Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
Depending on the font icons library, you can set the:
- icon property to a font icon in the Kendo UI theme. For details, go to the list of font icons supported by Kendo UI for Angular.
  html
```
<kendo-floatingactionbutton icon="calendar" ... ></kendo-floatingactionbutton>
```
- iconClass property to a third-party font icon library (such as FontAwesome).
  html
```
<kendo-floatingactionbutton iconClass="fa fa-book" ... ></kendo-floatingactionbutton>
```

The following example demonstrates how to set the icon, and iconClass properties of the FloatingActionButton