title: Color Overlay on SVG as Background
body: <p>I'm working with SVG sprites to create an icon system. I'm using <a href="https://www.npmjs.org/package/gulp-svg-sprites" rel="nofollow">gulp-svg-sprites</a> to generate the sprites and am using the <code>symbol</code> option so when calling each SVG, I can use something as simple as:</p>
  
  <pre><code>&lt;svg class="icon"&gt;&lt;use xlink:href="sprite/svg/symbols.svg#icon-alert"&gt;&lt;/use&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>With <code>fill: currentColor</code> I'm able to also control the color of each icon, which again, is great.</p>
  
  <p>The issue comes when I need to use these icons as a background element. I'm aware that you cannot use <code>xlink:href</code> to grab a specific icon from the sprite -- and am okay just grabbing the individual SVG when needed here, but the issue comes when I need to change the fill/color of that SVG that is referenced as a background image.</p>
  
  <p>Things like <code>-webkit-background-clip: text;</code> work great for applying a different background and cutting off based on the text, but I need a solid color overlay that can be switched out on demand.</p>
  
  <p>Is there a simple SVG filter I can attach onto this background (referenced as an SVG) that I can bolt-onto this? Would appreciate any help. Thanks!</p>
  
  <h1>Update</h1>
  
  <p><a href="http://codepen.io/anon/pen/wpijt" rel="nofollow">Here is a working example</a>. BUT, I'm looking for something that could also work in IE9, which is why I was hoping for something else.</p>