How to add color inside an icon?

Question

I'm trying to color the background of an icon (from material-icons) but not beyond its outline (images illustration below).

As shown on this jsfiddle, I was only able to color the background but it does not fit the icon perfectly.

.material-icons {
  background:white;
}

Start :

What I try to get:

What I succeed to do :

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?

Answer 1

Using absolute positioning, a 15px by 15px div, and border-radius 50% worked for me in JSFiddle.

HTML:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="block">
  <div class="icon">
    <p class="iconfix">
      <i class="material-icons" style="color:green">check_circle</i>
    </p>
  </div>
</div>

CSS:

.block {
  width: 100px;
  height: 100px;
  background: grey;
}

.icon {
  background: #fff;
  width:15px;
  height:15px;
  border-radius: 50%;
  position: absolute;
  top: 1em;
  left: 1em;
}

.iconfix {
  position: absolute;
  top: -1.2em;
  left: -0.2em;
}