[IconButton] Improve size values

Current Behavior 😯

When giving IconButton size properties medium and larger the size class is not set.

Expected Behavior 🤔

That MuiIconButton get MuiIconButton-sizeMedium and MuiIconButton-sizeLarge the same way as MuiIconButton-sizeSmall

Steps to Reproduce 🕹

<IconButton size="large">
  <FontAwesomeIcon icon={faPlay} />
  <FontAwesomeIcon icon={faChevronRight} />
</IconButton>

<IconButton size="medium">
  <FontAwesomeIcon icon={faPlay} />
  <FontAwesomeIcon icon={faChevronRight} />
</IconButton>

Your Environment 🌎

`System: OS: macOS 11.0.1 Binaries: Node: 12.18.4 - /usr/local/bin/node Yarn: 1.22.5 - ~/.yarn/bin/yarn npm: 6.14.9 - /usr/local/bin/npm Browsers: Chrome: 87.0.4280.88 * Edge: Not Found * Firefox: Not Found Safari: 14.0.1 npmPackages: @emotion/styled: 10.0.27 @material-ui/core: ^4.11.2 => 4.11.2 @material-ui/styles: 4.11.2 @material-ui/system: 4.11.2 @material-ui/types: 5.1.0 @material-ui/utils: 4.11.2 @types/react: ^16.9.53 => 16.14.2 react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 styled-components: ^5.2.1 => 5.2.1 typescript: ^4.0.3 => 4.1.3 `

[oliviertassinari]

In my opinion, it makes sense for us now to generate all class names, both for the default and non-default props values.

@mnajdova I would personally encourage we follow Bootstrap, reducing the number of classname anytime there is an opportunity for, example designers don’t need size medium, they can customize the default styles.

Regarding the size of the IconButton, Material Design does no longer document this component. It seems that we can take some freedom. I have noticed that Google, on its product on desktop is reducing the size of the element. If you take Google Calendar, alone, you can find 5 different sizes:

• 
• 
• 
• 
• 

I think that we should do the following:

• small: 32px -> padding: 5px
• medium: 40px -> padding: 8px (default)
• large: 48px -> padding 12px

@hpeide Do you want to work on the problem? The current default at 48px is too much.

[mnajdova]

In my opinion, it makes sense for us now to generate all class names, both for the default and non-default props values. The biggest reason for it is, if someone changes their defaults, for example, their default size to be large, they wouldn’t be able to change the styles for the medium as they will not be able to select an appropriate global class name. For v5 at least we will make sure that we have global classes for all states, both default and non default.

Regarding the size for the IconButton, I think it would make sense that we support three sizes, as we do with the other buttons.