[IconButton] Add hover effect to IconButton

[SebastianSchmidt]

Closes #10869

This pull request is part of #10870.

[mbrookes]

I'm on the fence about this change in general, but it has an unintended effect on selection controls that needs to be addressed if we're to go ahead with this PR.

[SebastianSchmidt]

@mbrookes I removed the unintended hover effect from the selection controls.

[mbrookes]

Also Table pagination:

https://deploy-preview-10871--material-ui-next.netlify.com/demos/tables/#sorting-amp-selecting

Admittedly the right margin on the last column looks off in that example (as does the column spacing in the Table component in general), but I'm not sure whether the pagination icons should have the hover effect. (I'm still adjusting to it 😄@oliviertassinari, thoughts?

[leMaik]

@mbrookes The right margin of the buttons looks a bit off in that demo, because that table has >100% width and is horizontally scrollable (PR that fixes that).

If you scroll it to the right, everything is fine (and the margin is carefully crafted to match the spec's pictures of the table pagination). I think the hover effect would be great on those buttons, so that the user can see that they are clickable. 👍

[mbrookes]

that table has >100% width and is horizontally scrollable

Oh, so it is. We need to fix the button overflow elsewhere then.

[oliviertassinari]

@SebastianSchmidt I have changed the fade value to stick to the material-web-components value. https://github.com/material-components/material-components-web/blob/06e39b18e1ecc56785ea0cf82ba093c17fde516f/packages/mdc-ripple/_variables.scss#L23. However, I start to believe that we should revert this PR, and move the logic to the ButtonBase. What do you think about it?