css - 聚合物铁-图标大小不变

Question

我在调整我正在使用的 iron-icon 的大小时遇到​​了一些问题。我可以看到我设置的宽度和高度正在应用于 .iron-icon-1(当我在 chrome 开发工具中检查时)- 但图标的可见大小没有改变。

将相关代码放在下面(以供引用，我已经包含它包含 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 变量、直接高度/宽度 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>