Question

使用

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

我有正确的图标，但不幸的是，它很小（大约24像素）。

我试图指定宽度：

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

但它没有用。是否可以指定图标的宽度？

感谢。

Answer 1

在1.1中，正确的方法是：

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

Answer 2

由于Polymer 1.x CSS变量提供了一种方便的方法来实现所需的效果。如果paper-icon-button合并了iron-icon，则可以设置iron-icon具体CSS variables：

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

Answer 3

core-icon本身可以调整大小，这是我们使用SVG的原因之一（默认情况下;另一个原因是可以着色）。

但是*-icon-button并没有提供控制这个大小的渠道。

我创建了一些问题门票：

https://github.com/Polymer/core-icon-button/issues/3

https://github.com/Polymer/paper-button/issues/9

Answer 4

您可以尝试以下解决方法：

paper-icon-button::shadow core-icon{ 
    -moz-transform: scale(2); 
    -webkit-transform: scale(2); 
    transform: scale(2); /* 48px */

    fill: rgb(255,255,255);
}

Answer 5

core-icon-button::shadow core-icon {
  height: 48px;
  width: 48px;
}
or
paper-icon-button::shadow core-icon {
  height: 48px;
  width: 48px;
}

作品。

Answer 6

我使用了css属性＆＃39; zoom＆＃39;放大在Chrome中适用于我。 Haven尚未在Safari或Firefox上测试过。

Answer 7

图标大小在core-iconset元素中指定： http://www.polymer-project.org/docs/elements/core-elements.html#core-iconset

Answer 8

纸质按钮，纸张图标按钮属性min-width仅接受EM作为值。

e.g。 min-width: 1em;

1em = 16px

用于px到em的转换 - ＆gt; click here

Answer 9

我最终可以通过设置以下css属性来更改图标大小：

paper-icon-button iron-icon.iron-icon-0 {
    width: /*yoursizehere*/
    height: /*yoursizehere*/
}

我在开发控制台中挖掘后发现了这一点，看看哪些属性实际上有所改变。这可能不是最正确的解决方案，但其他答案如01es并不起作用：

.my-button {
    --iron-icon-height: 48px;
    --iron-icon-width: 48px;
}

这些属性要么没有改变，要么被覆盖。

聚合物纸图标按钮指定图标的宽度

9 个答案: