iron-iconset-svg and var(--primary-text-color);

Question

I am trying to get var(--primary-text-color); working that is defined in a :root{}. Every element gets updated except for my custom icon set that gets imported in another element, I need to hardcode it to define a 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

There is no support for using CSS variables this way.

In your HTML the <style> element is projected using the <content> element. This doesn't work for arbitrary elements, only for <dom-module>.

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

If you want to only color <path> elements I think the only way is to create your custom icon element (same as https://github.com/PolymerElements/iron-icon/blob/master/iron-icon.html) where you modify only the <style> tag and keep the rest as it is

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

and style it using

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

If you just want to styls all SVG elements using this color settings then you should be able to do so by styling the <iron-icon> element from the parent component (not tried myself):

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