React MUI SpeedDialIcon API

Last Updated : 29 Dec, 2022

Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI SpeedDialIcon API. The SpeedDials are used to display three to six actions immediately. SpeedDialIcon is the icon used to display the SpeedDial. The API provides a lot of functionality and we will learn to implement them.

Import SpeedDialIcon API:

import SpeedDialIcon from '@mui/material/SpeedDialIcon';
// or
import { SpeedDialIcon } from '@mui/material';

Props List: Here is the list of props used with this component. We can access them and modify them according to our needs.

classes: This overrides the existing styles or adds new styles to the component.
sx: The system prop allows defining system overrides as well as additional CSS styles.
icon: It is the label displayed in the step icon.
openIcon: It is the icon to display when the SpeedDial is open.

CSS Rules:

root(.MuiSpeedDialIcon-root): It is the style applied to the root element.
icon(.MuiSpeedDialIcon-icon): It is the style applied to the icon component.
iconOpen(.MuiSpeedDialIcon-iconOpen): It is the style applied to the icon component if open is set to true.
iconWithOpenIconOpen(.MuiSpeedDialIcon-iconWithOpenIconOpen): It is the style applied to the icon when an openIcon is provided and if open is set to true.
openIcon(.MuiSpeedDialIcon-openIcon): It is the style applied to the openIcon if provided.
openIconOpen(.MuiSpeedDialIcon-openIconOpen): It is the style applied to the openIcon if provided and if open is set to true.

Syntax: Create SpeedDialIcon inside SpeedDial as follows:

<SpeedDial
    sx={{
        position: "absolute",
        bottom: 16, right: 16
    }}
    icon={<SpeedDialIcon />}
>
</SpeedDial>

Creating React app and Installing dependencies:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react @emotion/styled @mui/lab @mui/icons-material

Project Structure:

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have SpeedDialIcon in the SpeedDial.

App.js

Javascript

import "./App.css"; 
import * as React from "react"; 
import Box from "@mui/material/Box"; 
import SpeedDial from "@mui/material/SpeedDial"; 
import SpeedDialIcon from "@mui/material/SpeedDialIcon"; 
import SpeedDialAction from "@mui/material/SpeedDialAction"; 
import FileCopyIcon from "@mui/icons-material/FileCopyOutlined"; 
import SaveIcon from "@mui/icons-material/Save"; 
import PrintIcon from "@mui/icons-material/Print"; 
import ShareIcon from "@mui/icons-material/Share"; 
import { Css, Html, Javascript } 
    from "@mui/icons-material"; 
  
const actions = [ 
    { icon: <Html />, name: "HTML" }, 
    { icon: <Css />, name: "CSS" }, 
    { icon: <Javascript />, name: "Javascript" }, 
]; 
  
function App() { 
    return ( 
        <div className="App"> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong> 
                    React MUI SpeedDialIcon API 
                </strong> 
            </div> 
            <br /> 
            <Box sx={{ 
                height: 320, transform: 
                    "translateZ(0px)", flexGrow: 1 
            }}> 
                <SpeedDial 
                    ariaLabel="SpeedDial basic example"
                    sx={{ 
                        position: "absolute", 
                        bottom: 16, right: 16 
                    }} 
                    icon={<SpeedDialIcon />} 
                > 
                    {actions.map((action) => ( 
                        <SpeedDialAction 
                            key={action.name} 
                            icon={action.icon} 
                            tooltipTitle={action.name} 
                        /> 
                    ))} 
                </SpeedDial> 
            </Box> 
        </div> 
    ); 
} 
  
export default App; 

Output:

Example 2: In the following example, we have customized the SpeedDialIcon openIcon to the right arrow icon.

App.js

Javascript

import "./App.css"; 
import * as React from "react"; 
import Box from "@mui/material/Box"; 
import SpeedDial from "@mui/material/SpeedDial"; 
import SpeedDialIcon from "@mui/material/SpeedDialIcon"; 
import SpeedDialAction from "@mui/material/SpeedDialAction"; 
import { 
    Css, 
    Html, 
    Javascript, 
    ArrowForward, 
    Language, 
} from "@mui/icons-material"; 
  
const actions = [ 
    { icon: <Html />, name: "HTML" }, 
    { icon: <Css />, name: "CSS" }, 
    { icon: <Javascript />, name: "Javascript" }, 
]; 
  
function App() { 
    return ( 
        <div className="App"> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI SpeedDialIcon API</strong> 
            </div> 
            <br /> 
            <Box 
                sx={{ 
                    height: 320, 
                    transform: "translateZ(0px)", 
                    flexGrow: 1, 
                }} 
            > 
                <SpeedDial 
                    ariaLabel="SpeedDial basic example"
                    sx={{ 
                        position: "absolute", 
                        left: 16, 
                    }} 
                    icon={ 
                        <SpeedDialIcon icon={<Language />}  
                            openIcon={<ArrowForward />} /> 
                    } 
                    direction="right"
                > 
                    {actions.map((action) => ( 
                        <SpeedDialAction 
                            key={action.name} 
                            icon={action.icon} 
                            tooltipTitle={action.name} 
                        /> 
                    ))} 
                </SpeedDial> 
            </Box> 
        </div> 
    ); 
} 
  
export default App; 