[Fab] There's no padding for the small variant

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

https://v4.mui.com/components/floating-action-button/#size

Expected behavior 🤔

No response

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[danilo-leal]

@jharwinbarrozo Hey, just recapping the resolution: we should tackle this on the component level to have it fixed out-of-the-box but that would be a breaking change (not the moment for having it right now) - therefore we won’t do it soon.

However, you could do the fix yourself on your theme level as explained in https://github.com/mui/material-ui/issues/31381#issuecomment-1062642494! Thanks for letting us know, we’ll come back to this once v6 starts!

[siriwatknp]

If this issue is about no padding, I think we can close it because the padding is there:

https://mui.com/components/floating-action-button/#main-content

If it is about unsymmetrical spacing with icon, I still think that it is not worth changing it right now because people can adjust it with theme API.

createTheme({
  components: {
    MuiFab: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          ...ownerState.variant === 'extended' && ownerState.size === 'small' && {
            paddingRight: '12px', // or the value you like.
          }
        })
      }
    }
  }
})