iron-icon styling issue - display block should be set.

[rene-lindner-isw]

Description

The iron-icon is by default correctly set to display: inline.
But inside the paper-icon-item it should fill it's parent, so display: block would be appropriate.

Expected outcome

The iron-icon is always centered inside the paper-icon-item and fills it.

Actual outcome

This is only true for the default size.
If the paper-icon-item is smaller (e.g. an clear button for an paper-input should have 24x24 according to MD guidelines) the position of the iron-icon is too low. display: block for the iron-icon would fix this issue.

Live Demo

Steps to reproduce

paper-input paper-icon-button {
	width: 24px;
	height: 24px;
	padding: 2px;
}

<paper-input label="Some text field">
	<paper-icon-button slot="suffix" icon="clear"></paper-icon-button>
</paper-input>

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[rene-lindner-isw]

#33 is basically the same problem, and would also be solved when the iron-icon is set to block