polymer paper-icon-button specify width of icon

Question

Using

<paper-icon-button icon='image:photo' fill="true"></paper-icon-button>

I have the correct icon, but unfortunately, it's small (around 24px).

I tried to specify the width :

paper-icon-button {
    min-width: 50px;
}

But it's not working. Is it possible to specify the width for the icon ?

Thanks.

Answer 1

In 1.1, the correct way to do this is:

.my-button {
  --paper-icon-button: {
    width: 24px;
    height: 24px;
  }
}

Answer 2

Since Polymer 1.x CSS variables provide a convenient way to achieve the desired effect. In case of paper-icon-button, which incorporates iron-icon it is possible to set iron-icon specific CSS variables:

.my-button {
--iron-icon-height: 24px;
--iron-icon-width: 24px;
}
...
<paper-icon-button icon="menu" class="my-button"/>