How to add a text into Material UI speed dial button?

Question

How to change the material ui speeddial button, apparently it uses the Fab default and all you can do is to change the Icon, but I need to add a text as well, for example:

<Fab variant="extended">
    <NavigationIcon />
    Actions
</Fab>

Answer 1

1. Use SpeedDialAction for this purpose

    <SpeedDialAction
       key={action.name}
       icon={action.icon} // here goes your icon
       tooltipTitle={action.name} // here goes your text
       tooltipOpen
       onClick={handleClose}
    />

On hover you will see

• Documentation for it
• Live example

2. Or use floating action button for your purpose

    <Fab
        aria-label={fab.label}
        className={fab.className}
        color={fab.color}
    >
        {fab.icon}
    </Fab>

• Documentation for it
• Live example

---

Please, let me know if it works for you or not )

Answer 2

Sorry that this is late, but I recently ran into this problem and found the solution:

SpeedDial comes with FabProps prop to enable you to modify the Fab (Fab docs: https://mui.com/material-ui/api/fab/).
So firstly you should modify the Fab to use variant="extended". Then to add your text, use the icon prop from SpeedDialIcon.

So your component should look something like this:

<SpeedDial
  FabProps={{ variant: "extended" }}
  icon={
    <SpeedDialIcon
      icon={
        <Box sx={{ display: "flex" }}>
          <YourIcon />
          <Typography> {/* Your text */} </Typography>
        </Box>
    />
  }
/>