聚合物铁图标尺寸不变

我在调整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; 
}

谢谢！

来源

2016-07-05 Vanita

你试图使用标签名带班？ 'iron-icon.overlay-tick {}' –

是的，没有解决问题 – Vanita

不知道这是否在另一个聚合物元素或不......我把这个快速JSbin放在一起，我意识到它使用2.0预览分支，但在这种情况下，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>

来源

2017-04-21 09:09:47 ktiedt

聚合物铁图标尺寸不变

回答

相关问题