title: How to add color inside an icon?
body: <p>I'm trying to color the background of an icon (from <a href="https://material.io/icons/" rel="noreferrer">material-icons</a>) but not beyond its outline (images illustration below).</p>
  
  <p>As shown on this <a href="https://jsfiddle.net/wzeay42e/" rel="noreferrer">jsfiddle</a>, I was only able to color the background but it does not fit the icon perfectly.</p>
  
  <pre><code>.material-icons {
    background:white;
  }
  </code></pre>
  
  <p>Start :</p>
  
  <p><a href="https://i.stack.imgur.com/lj7b0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lj7b0.png" alt="enter image description here"></a></p>
  
  <p>What I try to get:</p>
  
  <p><a href="https://i.stack.imgur.com/7iSG4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7iSG4.png" alt="enter image description here"></a></p>
  
  <p>What I succeed to do :</p>
  
  <p><a href="https://i.stack.imgur.com/gxZAn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gxZAn.png" alt="enter image description here"></a></p>
  
  <p>I did not find a filled version of the icon. Ideally I don't want to use an other font just to answer that problem. Is it possible to do that in CSS or do I have to use a different version of the icon?</p>