[icons] Add fontSize small and large

[JoshuaLicense]

I ran into the same issue as #12863 when using a dense Toolbar and an IconButton. This resolves the sizing in the dense Toolbar and closes #12863.

The small & large sizing is 8px either side of the medium size.

Closes #12863

[mbrookes]

@JoshuaLicense Nice job! Please could you run yarn docs:api?

[oliviertassinari]

@JoshuaLicense I have rebased your branch on master, it was quite old. What do you think of moving the size property to the icon itself? We could add a padding: 12 to the icon button to restore the default size.

[JoshuaLicense]

@mbrookes Sure, forgot about that.

@oliviertassinari Apologies, should be up-to-date now.

I wasn't sure on resizing the Icon component as the actual icon size was not the issue (in this case).

Would adding a fontSize to the sizeSmall and sizeLarge classes to correctly adjust the size accordingly when using fontSize="inherit" on the Icon be better? Which would allow more control of the icon size in the different size buttons?

Example

sizeSmall: {
    width: 40,
    height: 40,
+   fontSize: theme.typography.pxToRem(23),
  },

<IconButton aria-label="Delete" size="small" className={classes.button}>
    <DeleteIcon 
+    fontSize="inherit" 
    />
</IconButton>

[oliviertassinari]

What do you think of moving the size property to the icon itself?

I'm asking because we could solve two problems at once. Vuetify or Font awesome have a property to change the icons size. Once we have that, the icon button size issue can be solved almost for free.

[Mr-XiaYang]

@oliviertassinari
"We could add a padding: 12 to the icon button to restore the default size."
Should I change padding: 12 to padding: 8?