Make iron-icon bigger in paper-fab

Question

I am using polymer and iron icons, my questio is: Can you make the iron icons while they are in a paper-fab:

my code:

<paper-fab id="add" icon="list" on-click="addingPersonnel"></paper-fab>

The icon is relativly small in comparison with the paper-fab.

Answer 1

I can see two possibilities.

The first one maybe you won't like it but it will remove the effect of a small icon, would be to use the attribute mini on the paper-fab :

<paper-fab mini id="add" icon="list" on-click="addingPersonnel"></paper-fab>

The second solution is to change the size of the icon in CSS as below :

paper-fab {
    padding: 0;

    --paper-fab-iron-icon: {
      height: 30px;
      width: 30px;
    };
  }

The padding is blocking the icon to go bigger than its current size so we will set it to 0. And then using the mixin --paper-fab-iron-icon you can set the height and width of your icon.

The complete code will be :

<dom-module id="os-test">
    <template>
       <style>
            paper-fab#add {
                padding: 0;

                --paper-fab-iron-icon: {
                    height: 40px;
                    width: 40px;
                };
            }
        </style>
        <paper-fab id="add" icon="list"></paper-fab>
    </template>
</dom-module>
<script>
  class OsTestElement extends Polymer.Element {
    static get is() {
      return 'os-test';
    }    
  }
  window.customElements.define(OsTestElement.is, OsTestElement);
</script>