Make Eisen-Symbol größer in Papier-fab

Question

I Polymer und Eisen Symbole verwenden, meine questio ist: Können Sie die Eisen-Symbole machen, während sie in einem Papier-fab sind:

mein Code:

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

Das Icon ist relativ klein im Vergleich zur Papierfabrik.

Answer 1

kann ich zwei Möglichkeiten sehen.

Das erste ein möglicherweise mögen Sie es nicht, aber es wird die Wirkung eines kleinen Symbol entfernen, das Attribut mini auf die paper-fab zu verwenden wäre:

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

Die zweite Lösung wie unten ist die Größe des Symbols in CSS zu ändern:

paper-fab { 
    padding: 0; 

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

die Polsterung auf das Symbol blockiert gehen größer als seine aktuelle Größe so werden wir setze es auf 0. Und dann kannst du mit dem Mix --paper-fab-iron-icon die Höhe und Breite deines Icons einstellen.

wird der vollständige Code sein:

<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>