使用绝对定位，一个15px乘15px的div和50%的边界半径对我来说在JSFiddle中很有效。

超文本：

<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;
}

你应该把父div做成圆形，然后给予它一个背景色用途：

border-radius: 50%;

https://jsfiddle.net/507fsp46/

尝试包含CSS样式border-radius。
Relevant Fiddle.
否则，你可以找到一个PNG/SVG版本的图标和颜色。

你所面临的问题是你的图标看起来像这样，它是一个圆变成了一个正方形。
试试这个SVG或者这个.

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

.whiteBackground {
  background-color: white;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.cls-1
{fill:green;}

.cls-2{fill:#fff;}

.orange{
  width: 25px;
}

<div class="block">
  <div class="whiteBackground">
<svg enable-background="new 0 0 24 24" height="24px" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path d="M12,0C5.373,0,0,5.373,0,12c0,6.628,5.373,12,12,12c6.627,0,12-5.372,12-12C24,5.373,18.627,0,12,0z M19.754,9.561    l-8.607,8.607c-0.176,0.177-0.462,0.177-0.637,0l-1.272-1.285c-0.175-0.176-0.462-0.464-0.636-0.642l-2.96-3.112    c-0.087-0.087-0.133-0.21-0.133-0.327c0-0.115,0.046-0.227,0.133-0.314l1.297-1.169c0.088-0.09,0.205-0.134,0.321-0.134    c0.114,0.001,0.228,0.046,0.315,0.134l2.936,2.995c0.175,0.178,0.461,0.178,0.637,0l6.699-6.681c0.176-0.177,0.461-0.177,0.636,0    l1.272,1.285C19.93,9.094,19.93,9.384,19.754,9.561z" fill="green"/></g></g></svg>
  </div>
  
<svg class="orange" data-name="Layer 1" id="Layer_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><defs><style></style></defs><title/><circle class="cls-1" cx="68.31" cy="64" r="60"/><polygon class="cls-2" points="61.19 88.14 89.09 42.49 83.8 40.12 59.56 80.23 46.27 72.19 43.08 77.46 61.19 88.14"/></svg>
</div>

另一种方法是直接在svg里面画一个与图标轮廓匹配的圆，材质图标里面的第一个<path/>是包围实际图标路径的方框，这个方法用一个比图标轮廓稍小的圆来代替它，然后用一些颜色来填充它，例如：

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    height="24px" 
    viewBox="0 0 24 24" 
    width="24px" 
    fill="#000000">
    <path d="M0 0h24v24H0z" fill="none"/> <!-- square box to be replaced by a circle -->   
    <path 
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

替换为：

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    height="24px" 
    viewBox="0 0 24 24" 
    width="24px" 
    fill="#000000">
    <circle cx="12" cy="12" r="8" fill="#ffffff"/>
    <path 
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

一个二个一个一个

另一个解决方案是创建径向渐变背景。
背景：径向梯度（圆形，RGBA（255、255、255、1）51%，RGBA（128、128、128、1）53%）;
这在上面提到的例子中非常有效。

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

.block i {
  color : green !important;
}

.material-icons{
  background:white !important;
}

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

这是你要找的东西吗？
这里是JSFiddle
希望这个有用。