Question

我在调整iron-icon我使用的大小时遇到了一些问题。我可以看到我设置的宽度和高度.iron-icon-1（当我在chrome dev工具中检查时） - 但图标的可见尺寸没有变化。

将相关代码放在下面（以供参考我已将其包含在包含div的内容中以防相关）。

<div class="user-avatar-overlay"><iron-icon icon="icons:check" class="overlay-tick"></iron-icon></div>

.user-avatar-overlay {
    width: 50px;
    height: 50px;
}
.overlay-tick {
    --iron-icon-fill-color: white; //This styling is being applied correctly
    --iron-icon-height: 25px;
    --iron-icon-width: 25px;
}

谢谢！

Answer 1

不知道这是否在另一个Polymer Element中......我把这个快速的JSbin放在一起，我意识到它使用了2.0-preview分支，但在这种情况下，CSS部分没有改变。我还包括了一些典型的方式，你可以设置图标的样式...使用--iron-icon css vars，直线高度/宽度css以及父选择器选项。

https://jsbin.com/niqexomufa/edit?html,output

注意：如果这没有帮助，提供有关实际使用情况的更多详细信息（如jsbin或其他内容）将会解决您的确切问题。

（下面的相关CSS和DOM来安抚SO众神）

        iron-icon.enormous {
          height: 100px;
          width: 100px;
        }
        iron-icon.tiny {
          --iron-icon-height: 10px;
          --iron-icon-width: 10px;
        }
        .another {
          --iron-icon-height: 20px;
          --iron-icon-width: 20px;
        }

      <div>An enormous icon goes here: <iron-icon class="enormous" icon="icons:check"></iron-icon></div>
      <div>A tiny icon goes here: <iron-icon class="tiny" icon="icons:check"></iron-icon></div>        
      <div class="another">Another icon goes here: <iron-icon icon="icons:check"></iron-icon></div>

聚合物铁 - 图标大小不变

1 个答案: