iron-iconset-svgおよびvar（ - primary-text-color）;

Question

:root{}で定義されているvar(--primary-text-color);の作業をしようとしています。別の要素にインポートされたカスタムアイコンセットを除いて、すべての要素が更新されます。色を定義するためにハードコードする必要がありますか？

<link rel="import" href="../../bower_components/iron-iconset-svg/iron-iconset-svg.html"> 

<iron-iconset-svg name="gender-icons" size="75"> 
    <svg viewBox="0 0 75 75"> 
     <style> 
      path { 
       color: white; 
       /*var(--primary-text-color);*/ 
       stroke: white; 
       /*var(--primary-text-color);*/ 
      } 
     </style> 
     <defs> 
      <g id="female" transform="translate(-348.7552,-478.0905)"> 
      <g id="g3773" transform="matrix(1.071197,0,0,1.075147,-13.30677,-36.99488)"> 
       <path 
       d="M 176 33 A 11 11 0 1 1 154,33 A 11 11 0 1 1 176 33 z" 
       transform="matrix(1.540096,0,0,1.5384,118.8893,454.0543)" 
       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" 
       id="path3939" /> 
       <path 
       d="M 373.00525,521.74399 L 373.00525,543.28159" 
       style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke-width:4.61774349;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" 
       id="path3941" /> 
       <path 
       d="M 363.76467,534.05119 L 382.24582,534.05119" 
       style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke-width:4.61774349;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" 
       id="path4816" /> 
      </g> 
      </g> 
      <g id="male" transform="translate(-348.7552,-478.0905)"> 
      <g id="g1872" transform="matrix(1.948116,0,0,1.937312,-342.4303,-460.0101)"> 
       <path 
       d="M 387.95009,489.60348 L 378.66214,498.89143" 
       style="opacity:1;fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" 
       id="path26867" /> 
       <path 
       d="M 49.396475 36.70454 A 15.623922 16.319134 0 1 1 18.14863,36.70454 A 15.623922 16.319134 0 1 1 49.396475 36.70454 z" 
       transform="matrix(0.48802,0.48802,-0.467594,0.467594,371.6094,473.1357)" 
       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke-width:4.44071579;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" 
       id="path26871" /> 
       <path 
       d="M 379.92823,489.70212 C 387.842,489.70212 387.842,489.70212 387.842,489.70212 L 387.842,497.61589" 
       style="fill:none;fill-rule:evenodd;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" 
       id="path27759" /> 
      </g> 
      </g> 
     </defs> 
    </svg> 
</iron-iconset-svg> 

Answer 1

このようにCSS変数を使用するサポートはありません。

<style>要素では、<content>要素を使用して要素が投影されます。 これは任意の要素に対しては機能しません。<dom-module>の場合にのみ機能します。

<dom-module id="xxx"> 
    <template> 
    <style> 
     ... 
    </style> 
    </template> 
</dom-module> 

あなたが唯一の私が唯一の方法はあなただけ<style>タグを変更し、それが

<style> 
    :host { 
     @apply(--layout-inline); 
     @apply(--layout-center-center); 
     position: relative; 
     vertical-align: middle; 
     fill: var(--iron-icon-fill-color, currentcolor); 
     stroke: var(--iron-icon-stroke-color, none); 
     width: var(--iron-icon-width, 24px); 
     height: var(--iron-icon-height, 24px); 

     path { 
     color: var(--gender-icon-color); 
     stroke: var(--gender-icon-stroke); 
     } 
    } 
    </style> 

あるとして、残りを保つ（ https://github.com/PolymerElements/iron-icon/blob/master/iron-icon.htmlと同じ）、カスタムアイコン要素を作成することだと思う <path>要素を色付けしたい場合

とスタイル、それは

<head> 
    <style is="custom-style"> 
    :root { 
     --gender-icon-color: white; 
     --gender-icon-stroke: white; 
    } 

を使ってあなただけのこの色の設定を使用して、すべてのSVG要素をstylsしたいなら、あなたはできトンでなければなりませんo 要素を親コンポーネントからスタイリングする（自分では試していない）。

<dom-module id="my-element"> 
    <template> 
    <style> 
     iron-icon.gender { 
     --iron-icon-fill-color: var(--primary-text-color); 
     --iron-icon-stroke-color: var(--primary-text-color); 
     } 
    </style> 
    </template> 
<dom-module>