Create checkboxes with icons inside circles

I would like some help over something thats driving me nuts so hard hahaha. So I have this checkboxes like this:

So, I have this design that my UX & UI colleague made for this project that I need something similar to this:

As you can see in the image above, I need to implement something where there`s no checkboxes and at the moment I select an Icon a color blue must show on the border as letting the user know that option has been selected.

The resource Im using for this is materializeCSS check boxes and my current CSS is the below:

/*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>

NOTE: If I select the icon or circle it gets checkboxed, so I guess thats nice

So, is there's some cool resource out there in the lost internet to do something like this? Or if have some basic code where pushes me to achieve something like this, that would be awsome! I will appreciate your help!