How to change size of core-icon-button and paper-icon-button for dart?

3.1k Views Asked by At

Is there a simple css styling entry to, say, halve the size of the core-icon-button?

I am replacing font-awesome icons with these and currently the icon size is much larger than the text, so I'm looking for a way to scale it down.

  <div horizontal layout>
    <core-icon-button icon="add-circle"></core-icon-button>
    <div horizontal layout center>Expand Entries</div>
  </div>

Ideally I'd like to shrink the icon inside the icon button and reduce the padding as well.

1

There are 1 best solutions below

5
On BEST ANSWER

This is how it looks when I use your code.

enter image description here

Whith this style in the element containing the <core-icon-button>

  core-icon-button /deep/ core-icon[role=img] {
    height: 12px;
    width: 12px;
    padding: 1px;
    margin: 1px;
  }

  core-icon-button {
    padding: 0 1px 1px 1px;
    margin: 1px;
  }

the icon becomes very small. I had to add the [role=img] because otherwise the selectivity was to low to take effect.