在纸张工厂中制作更大的铁图标

时间:2017-12-20 17:21:50

标签: polymer

我正在使用聚合物和铁的图标,我的问题是:你可以在纸制品厂制作铁图标:

我的代码:

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

与纸制品相比,该图标相对较小。

enter image description here

1 个答案:

答案 0 :(得分:2)

我可以看到两种可能性。

第一个可能你会不喜欢它,但它会删除小图标的效果,就是使用mini上的属性paper-fab

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