How to make a checkbox in circle shape with custom css?

How do I make a checkbox rounded with custom CSS? Something similar to the image below. I know there are frameworks like bootstrap provides this, but I don't want to use a framework for this sole purpose as I'm already using angular material.

HTML Code:

    <label class="checkbox-inline">
        <input type="checkbox" name="favoriteColors" ng-model="notification.checked"> 
    </label>

Thanks in Advance.