title: How can I change the color of this SVG?
body: <p>I'm trying to change the color of this SVG icon with CSS:</p>
  
  <pre><code>&lt;symbol id="meetings"&gt;
    &lt;svg viewBox="9 0 33 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
        &lt;g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(10.000000, 0.000000)"&gt;
            &lt;polygon id="Fill-1" points="0.484430769 31.5076923 31.9921231 31.5076923 31.9921231 0 0.484430769 0"&gt;&lt;/polygon&gt;
            &lt;g id="Group-4" transform="translate(0.000000, 5.907692)"&gt;
                &lt;path d="M4.92209231,11.8248862 C4.31409231,11.8248862 2.46006154,10.3154708 2.46006154,6.70390154 C2.46006154,2.47251692 4.8896,0.00704 7.79470769,0.00704 C9.18498462,0.00704 9.83926154,0.0715323077 10.5846154,0.745993846 C12.7123692,0.745993846 14.7702154,2.32433231 14.7702154,6.70390154 C14.7702154,10.2869169 12.9353846,11.8248862 12.3081846,11.8248862 C12.0900923,11.8248862 11.9241846,11.6338708 11.6795077,11.3847631 C11.4304,11.6328862 11.1547077,11.8539323 10.8583385,12.0439631 C10.9883077,13.9743015 11.7257846,14.7536246 13.8594462,15.5452554 C16.0896,16.3728246 17.1037538,16.9429169 17.2332308,19.1730708 C17.2494769,19.4477785 17.0402462,19.6831015 16.7655385,19.6993477 C16.7566769,19.69984 16.7483077,19.69984 16.7394462,19.69984 L0.494769231,19.69984 C0.219569231,19.6983631 -0.00147692308,19.4738708 2.03980422e-13,19.1991631 C2.03980422e-13,19.1903015 0.000492307693,19.1819323 0.000984615385,19.1730708 C0.130953846,16.9429169 1.14461538,16.3728246 3.37526154,15.5452554 C5.50793846,14.7541169 6.24541538,13.9747938 6.37538462,12.0464246 C6.07606154,11.8549169 5.79790769,11.6319015 5.54633846,11.3808246 C5.29969231,11.6314092 5.13476923,11.8248862 4.92209231,11.8248862 M31.0129231,19.69984 L18.6973538,19.6983631 C18.4369231,19.6993477 18.2212923,19.4960246 18.2070154,19.2355938 C18.2178462,18.26624 17.9244308,17.3180554 17.3671385,16.5244554 C17.1515077,16.2615631 17.1899077,15.8736246 17.4532923,15.6579938 C17.5035077,15.61664 17.5606154,15.5831631 17.6216615,15.5600246 L17.6605538,15.5452554 C19.7971692,14.7516554 20.5326769,13.9703631 20.6596923,12.0301785 C20.2904615,11.7933785 19.9571692,11.5053785 19.6696615,11.1745477 C19.1537231,10.5055015 18.8292923,9.70944 18.7308308,8.87054769 C18.7067077,8.87300923 18.6825846,8.87497846 18.6589538,8.87497846 C18.1243077,8.87497846 17.7196308,7.74759385 17.7196308,6.95497846 C17.7196308,6.16236308 17.9943385,5.92113231 18.2562462,5.92113231 C18.3108923,5.92113231 18.3616,5.92408615 18.4108308,5.92802462 C18.2872615,5.43030154 18.2217846,4.92027077 18.2153846,4.40777846 C18.2153846,2.48580923 18.7544615,1.15559385 20.4007385,0.918793846 C21.312,0.286670769 22.6894769,0.00753230769 24.4494769,0.00753230769 C25.5748923,0.00753230769 24.6370462,0.777501538 25.6950154,1.00248615 C26.3497846,1.14180923 27.5687385,1.60556308 27.5687385,4.40777846 C27.5623385,4.92027077 27.4968615,5.43030154 27.3732923,5.92802462 C27.4220308,5.92408615 27.4732308,5.92113231 27.5278769,5.92113231 C27.7902769,5.92113231 28.0644923,6.16236308 28.0644923,6.95497846 C28.0644923,7.74759385 27.6603077,8.87497846 27.1256615,8.87497846 C27.1015385,8.87497846 27.0774154,8.87300923 27.0532923,8.87054769 C26.9548308,9.70944 26.6304,10.5055015 26.1144615,11.1745477 C25.8299077,11.5019323 25.5005538,11.7874708 25.1357538,12.0227938 C25.2612923,13.9688862 25.9958154,14.7511631 28.1353846,15.5452554 C30.3635692,16.3728246 31.3767385,16.9429169 31.5062154,19.1730708 C31.5224615,19.4472862 31.3137231,19.6831015 31.0395077,19.6993477 C31.0306462,19.69984 31.0217846,19.69984 31.0129231,19.69984" id="Fill-2"&gt;&lt;/path&gt;
            &lt;/g&gt;
        &lt;/g&gt;
    &lt;/svg&gt;
  </code></pre>
  
  <p></p>
  
  <p>I'm using that SVG in the HTML like this:</p>
  
  <pre><code>&lt;svg class="active" width="32px" height="32px"&gt;
      &lt;use xlink:href="#meetings"/&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Here is the CSS (using SASS):</p>
  
  <pre><code>.foot__icon svg.active {
    fill: #ffffff !important;
  
    path, g, #Group-4 {
      fill: #ffffff !important;
    }
  }
  </code></pre>
  
  <p>This isn't working and I can't figure out why. When I try to remove the fill declaration from the <code>g</code> tag (<code>fill="#03A9F4"</code>) then the SVG disappears completely. </p>
  
  <p>The active class is even showing up in dev tools but the color is not showing up white
  <a href="https://i.stack.imgur.com/ENHkF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ENHkF.png" alt="Screenshot of chrome dev tools"></a></p>
  
  <p>Update: This seems to be an issue with the <code>&lt;use&gt;</code> tag. If I put the class directly on the SVG, then it works as expected. Still not sure what's going on here.</p>