聚合物 paper-icon-button 指定图标宽度

Question

使用

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

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

我尝试指定宽度：

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

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

谢谢。

- FrPolymer

Answer 1

在1.1中，正确的做法是：

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

- Ben Davis

Answer 2

从Polymer 1.x开始，CSS变量为实现所需的效果提供了方便的方法。在paper-icon-button的情况下，它包含iron-icon，可以设置iron-icon特定的CSS变量：

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

- 01es

---

你真的能让这个工作吗？设置这些属性对我没有用。例如，我将它们都设置为100像素，但图标大小仍然是默认的24像素。 - nickjm

@nickjm 当然可以！否则我为什么要发布它(: 如果您正在尝试在“main”HTML文件中使用它，请确保样式已用custom-style进行注释。即：“<style is="custom-style">...”。 - 01es

可以的，那个方法可行！是否可以将“is="custom-style"”注释添加到CSS文件（例如main.css）中？ - nickjm

@nickjm 通常建议尽可能将所有内容表达为自定义元素（Web组件），在不需要使用“is =”custom-style“”的情况下。在Polymer 1.0中，导入CSS文件仍处于实验阶段。 - 01es

实际上，这在1.1版本中无效。现在正确的方法是使用“--paper-icon-button”混合器，并在那里设置“width”和“height”（请参见我下面的答案）。 - Ben Davis

Answer 3

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

但是*-icon-button不提供控制此大小的途径。

我创建了一些问题票： https://github.com/Polymer/core-icon-button/issues/3 https://github.com/Polymer/paper-button/issues/9

- Scott Miles

---

谢谢你的帮助。我尝试了，但最终转向了一个更加“基本”的解决方案（一个简单的图像）。即使我的图像没有“光泽”触摸效果，它也能正常工作！ - FrPolymer

正确答案可以在下面找到并应该被接受！Polymer提供mixin来改变按钮样式。 - Niklas

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);
}

- Fareed Alnamrouti

Answer 5

我使用了css属性“zoom”来放大。在Chrome中适用，但尚未在Safari或Firefox上进行测试。

- Mattijs

Answer 6

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

工作。

- jalbasri

Answer 7

paper-button和paper-icon-button属性min-width只接受EM作为值。

例如：min-width: 1em;

1em = 16px

要进行像素到EM的转换，请点击这里。

- phtn458

Answer 8

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

- Hans Spieß

---

我们不能重复使用默认图标吗？因为iconset是用于从特定的图像文件构建图标。在我的情况下，我想使用默认图标（图像：照片）。 - FrPolymer

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

这些属性要么没有改变任何东西，要么被覆盖了。

- nickjm