Polymer Eisen-Symbol Größe nicht ändern

Question

Ich habe einige Probleme bei der Anpassung der Größe eines iron-icon Ich benutze. Ich kann sehen, dass die Breite und Höhe, die ich setze, auf .iron-icon-1 angewendet wird (wenn ich in Chrome-Dev-Tools inspiziere) - aber die sichtbare Größe des Symbols ändert sich nicht.

Setzen Sie den entsprechenden Code unten (als Referenz habe ich es enthält div, falls relevant).

<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; 
} 

Danke!

Answer 1

Ohne zu wissen, ob dies in einem anderen Polymer Element oder nicht ist ... Ich stelle diese schnelle JSbin, ich realisiere es mit 2.0-Vorschau-Zweig, aber in diesem Fall ändert sich der CSS-Teil nicht. Ich habe auch fast immer typische Weise, wie Sie die Symbole stylen können ... mit dem --Iron-Symbol CSS-Vars, gerade Höhe/Breite css sowie eine Eltern-Selektor-Option.

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

Hinweis: Wenn dies nicht hilft, mehr Details zu Ihrer tatsächlichen Nutzung bereitstellt (wie ein jsbin oder etwas) entlang Weise Ihrer genauen Probleme bei der Fehlerbehebung.

(relevante CSS und DOM aus der unten zu beruhigen die SO Götter)

 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>