Html 在圆圈内创建带有图标的复选框

我想在一些让我发疯的事情上得到一些帮助，哈哈哈。我有这样的复选框：

因此，我有一个设计，我的UX&UI同事为这个项目做的，我需要类似的东西：

正如你在上图中看到的，我需要实现一些没有复选框的东西，现在我选择一个图标，一个蓝色的图标必须显示在边框上，让用户知道该选项已被选中

我为此使用的资源是materializeCSS复选框，我当前的CSS如下所示：

/*Checkboxes*/
[type="checkbox"]:checked + span:not(.lever):before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #2372bd;
    border-bottom: 2px solid #2372bd;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

/*Checkboxes*/
[type="checkbox"] + span:not(.lever):before, [type="checkbox"]:not(.filled-in) + span:not(.lever):after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid #888888;
    border-radius: 1px;
    margin-top: 3px;
    -webkit-transition: .2s;
    transition: .2s;
}

//This are the current circles that wrapps the icons
.services-circle{
  border: 1px solid #858585;
  width: 45px;
  margin-top: 10px;
  margin-bottom: 20px;
  height: 45px;
  border-radius: 50%;
}

//Current HTML
<label>
   <div class="services-circle center-align">
     <i class="material-icons-two-tone px32 no-margin-top-bottom">fireplace</i>
      <input name="property[services_attributes][0][gas]" type="hidden" value="0"><input 
 type="checkbox" value="1" name="property[services_attributes][0][gas]" 
 id="property_services_attributes_0_gas">
     <span for="gas">Gas</span>
    </div>
</label>

/*复选框*/
[type=“checkbox”]：选中+span:not（.lever）：之前{
顶部：-4px；
左：-5px；
宽度：12px；
高度：22px；
边框顶部：2倍纯色透明；
左边框：2倍实心透明；
右边框：2倍实心#2372bd；
边框底部：2个实心#2372bd；
-webkit变换：旋转（40度）；
变换：旋转（40度）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-webkit转换来源：100%100%；
变换原点：100%100%；
}
/*复选框*/
[type=“checkbox”]+span:not（.lever）：之前，[type=“checkbox”]：not（.filled in）+span:not（.lever）：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：18px；
高度：18px；
z指数：0；
边框：2个实心#8888888；
边界半径：1px；
利润上限：3倍；
-webkit转换：.2s；
过渡：.2s；
}
//这是包裹图标的当前圆圈
.服务圈{
边框：1px实心#8585；
宽度：45px；
边缘顶部：10px；
边缘底部：20px；
高度：45px；
边界半径：50%；
}
//当前HTML
壁炉
煤气

注意：如果我选择图标或圆圈，它会被选中，所以我想这很好

---

那么，在失落的互联网上是否有一些很酷的资源可以做这样的事情呢？或者，如果有一些基本的代码促使我实现这样的目标，那就太棒了！我将感谢你的帮助

将复选框设置为显示：无

将复选框设置为显示：无；不过这很有道理。当图标被选中时，我只需要添加一些花哨的颜色，你知道怎么做吗？我将发布显示：无；首先回答：）要在选中时添加颜色：输入[type=checked]{fancy color property goes here}要实现聚焦，请使用：#css:focus{background color:fancycolor；}