만들기, 내 ​​questio 종이 팹 나는 고분자와 철 아이콘을 사용하고

Question

에서 더 큰 철 아이콘입니다 :

내 코드 :

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

그들이 종이 팹에있는 동안 철 아이콘을 만들 수 있습니다

아이콘은 paper-fab과 비교하여 상대적으로 작습니다.

Answer 1

나는 두 가지 가능성을 볼 수 있습니다.

첫 번째 당신이 그것을 좋아하지 않을 것이다하지만 paper-fab에 속성 mini를 사용하는 것, 작은 아이콘의 효과를 제거합니다 어쩌면 하나

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

두 번째 솔루션 CSS의 아이콘 크기를 다음과 같이 변경하는 것입니다 :

paper-fab { 
    padding: 0; 

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

패딩이 아이콘을 현재 크기보다 크게 차단하고 있습니다. 0으로 설정하십시오. 그리고 mixin --paper-fab-iron-icon을 사용하여 아이콘의 높이와 너비를 설정할 수 있습니다.

전체 코드는 다음과 같습니다

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