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

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

[x] Chrome
[ ] Firefox
[ ] Safari 9
[ ] Safari 8
[ ] Safari 7
[ ] Edge
[ ] IE 11
[ ] IE 10

PolymerElements / paper-icon-button