padding affects rendered Icon size

[giladgray]

Environment

• Package version(s): core 3.x

Steps to reproduce

1. render an <Icon>
2. apply margin and padding to the rendered element.

Actual behavior

<Icon icon="calendar" iconSize={30}>

<Icon icon="calendar" iconSize={30} style={{ margin: 10 }} />

<Icon icon="calendar" iconSize={30} style={{ padding: 10 }} />

Expected behavior

iconSize={30} always produces a 30x30 icon image.

Possible solution

currently <Icon> renders svg.bp3-icon. a refactor to render span.bp3-icon > svg should resolve this, as padding/margin on the span would not affect the svg image inside. then iconSize would clearly dictate the size of the icon and the overall size of the element could be separately specified by CSS.

[giladgray]

this is quite similar to what I had to do with Spinner in #2868 to bring back IE support: previously, <Spinner> rendered the <svg> tag as its root but now it renders an HTML element that contains the svg.

seems like <svg> tags are best hidden inside HTML elements for isolation.