ionicons replace checkbox and radion buttons with icons
<p>I am using <code>Ionicons</code> on a project and have replaced the standard images for radio and checkbox with these icons.The issue I have is the actual default items are showing through the Ionicons when rendered.</p>

<p>I have the following HTML: </p>

<pre><code>&lt;input type="checkbox"
       name="client{!!  $client-&gt;uuid !!}"
       class="checkbox-icon ion-android-checkbox-outline-blank" checked&gt;
</code></pre>

<p>I also have the following CSS:</p>

<pre><code>.checkbox-icon:before,
.radio-icon:before {
  visibility: visible;
  font-size: 20px;
}

.checkbox-icon.ion-android-checkbox-outline-blank:checked:before {
  content: "\f374";     // icon for selected
  font-size: 20px;
  color: $brand-primary;
}

.radio-icon.ion-ios-circle-outline:checked:before {
  content: "\f120";     // icon for selected
  font-size: 20px;
  color: $brand-primary;
}

input[type=checkbox].checkbox-icon.ion-android-checkbox-blank,
input[type=radio].radio-icon.ion-record {
  visibility: hidden;
}
</code></pre>

<p>But although the checkboxes/radio buttons behave correctly, I can see the standard item below the ionicon. Is this due to the icon having a transparent background?</p>

<p>I tried changing opacity to 100% but it did not help.  </p>