Css 聚合物铁图标尺寸不变

我在调整正在使用的

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

将相关代码放在下面（为了便于参考，我将其包含div，以防相关）


.用户化身覆盖{
宽度：50px；
高度：50px；
}
.重叠勾号{
--熨斗图标填充颜色：白色；//此样式应用正确
--铁图标高度：25px；
--铁图标宽度：25px；
}

谢谢
 不知道这是否在另一个聚合物元素内。。。我把这个快速JSbin放在一起，我意识到它使用2.0-preview分支，但在本例中，CSS部分没有改变。我还包括了你设计图标的典型方式。。。使用--iron图标css变量、直线高度/宽度css以及父选择器选项


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

（下面是相关CSS和DOM，以安抚SO神）

iron-icon.com{
高度：100px；
宽度：100px；
}
铁图标{
--铁图标高度：10px；
--铁图标宽度：10px；
}
.另一个{
--铁图标高度：20px；
--铁图标宽度：20px；
}
这里有一个巨大的图标：
这里有一个小图标：
另一个图标是：
您是否尝试在类中使用标记名
iron-icon.overlay-tick{}
Yes，无法解决问题
<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;
}

        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>