title: Coloring SVG content url with css
body: <p>I have a button set up like this:</p>
  
  <pre><code>&lt;button class="buttonclass"&gt;&lt;i class="iconclass plus-icon"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <p>My css classes look like this:</p>
  
  <pre><code>.buttonclass {
    width: 30px;
    height: 30px;
    text-align: center;
    position: relative;
    border-radius: 20px;
    background-color: #1DBE60
  }
  
  .iconclass {
    width: 20px;
    height: 20px;
    margin: 7.5px;
  }
  
  .buttonclass .iconclass {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .plus-icon {
    content: url(http://uxrepo.com/static/icon-sets/mfg-labs/svg/plus.svg);
  }
  </code></pre>
  
  <p>How can I change the color of the 'plus-icon' with css if it is an SVG? I have tried adding fill classes to the svg, color classes, background-classes, etc.</p>
  
  <p>Here is a plunk:
  <a href="http://plnkr.co/edit/6fLYQlpFmDdf7aWenBtp?p=preview" rel="noreferrer">http://plnkr.co/edit/6fLYQlpFmDdf7aWenBtp?p=preview</a></p>