How to resize the icon button and icon button for a dart?

Is there a simple insertion of css styles like half the size of an icon button?

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

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

      

Ideally I would like to shrink the icon inside the icon button and reduce padding.

+3


source to share


1 answer


This is how it looks when I use your code.

enter image description here

This style on the element containing <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 [role=img]

because the selectivity was otherwise low to take effect.

+5


source







All Articles