React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Icons in React FloatingActionButton component

25 Jan 2023 / 2 minutes to read

You can customize the icon and text of React Floating Action Button(FAB) using iconCss and content properties.

FAB with icon

You can show icon only in Floating Action Button by setting iconCss property. You can show tooltip on hover to show additional details to end-user by setting title attribute.

Copied to clipboard
import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
    return (
        {/* To render Floating Action Button with icon only */}
        <FabComponent id='fab' iconCss='fab-icons fab-icon-people'></FabComponent>
    );
}
export default App;

FAB with icon and text

You can show icon along with text in Floating Action Button by setting iconCss and content properties.

Copied to clipboard
import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
    return (
        {/* To render Floating Action Button with icon and text */ }
        < FabComponent id = 'fab' iconCss = 'fab-icons fab-icon-people' content = 'Contacts' ></FabComponent >
    );
}
export default App;

Icon position

You can change the position of icon when showing along with content by setting iconPosition property. By default, the icon is positioned on the left side together with text.

Copied to clipboard
import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
    return (
        {/* To render Floating Action Button with icon position. */}
        <FabComponent id='fab' iconCss='fab-icons fab-icon-people' content='Contacts' iconPosition='Right'></FabComponent>
    );
}
export default App;

Below example demonstrates a FAB with icon and text.

Source
Preview
app.jsx
index.html
app.tsx
Copied to clipboard
import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<div>
            <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
            
            <FabComponent id='fab' iconCss='fab-icons fab-icon-people' content='Contacts' iconPosition='Right' target='#targetElement'></FabComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Floating Action Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
    return (
        <div>
            <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
            {/* To render Floating Action Button */}
            <FabComponent id='fab' iconCss='fab-icons fab-icon-people' content='Contacts' iconPosition='Right' target='#targetElement'></FabComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
Previous
Next