聚合物鐵圖標尺寸不變

我在調整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

聚合物鐵圖標尺寸不變

回答

相關問題