cuatomize radio input with "fonts.googleapis"

Question

Good morning. Improving this code I found it difficult to insert a custom radio with fonts.googleapis to show after the quiz verification function. Something like the attached image Do you have any suggestions? or better yet an example of code.... heartfelt thanks to the community, I wish you a good day to all and happy coding

var answers = ["1b"];
var rads, quiz; // need to be set after load
window.addEventListener("load",function() { // when page loads
  quiz = document.getElementById("quiz");
  rads = quiz.querySelectorAll("input[type=radio]"); // all radios in the quiz
  document.getElementById("scoreButton").addEventListener("click",function(e) { // on click of scoreme
    var score = 0;
    for (var i=0;i<rads.length;i++) { // loop over all radios in the form
      var rad = rads[i];
      var idx = rad.name.substring(1)-1; //remove the q from the name - JS arrays start at 0
      var checked = rad.checked;
      var correct = rad.value==answers[idx];
      
      if (correct) {
        rad.closest("label").classList.toggle("correct");
      }  
      else if (checked) {
        rad.closest("label").classList.toggle("error")
      }  
    }
  });  
});

.correct {
  color: green;
  font-weight: bold;
  text-decoration: underline;
  border-left: 2px solid green;
}
.error {
  color: red;
  font-weight: bold;
  text-decoration: line-through;
  border-left: 2px solid red;
  }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<form id="quiz">

<div class="questions">
<dl id="1">

    <dd><b>1. QUESTION.</b><br>
      <label><input type="radio" name="q1" value="1a"> 1. WRONG</label><br>
      <label><input type="radio" name="q1" value="1b"> 2. RIGHT</label><br>
      <label><input type="radio" name="q1" value="1c"> 3. WRONG</label>
    </dd>
</dl>

  <input type="button" value="RESULT" id="scoreButton"> 
</div>
</form>

Answer 1

var answers = ["1b", "1c"];
var rads, quiz, cur, par;// need to be set after load
var ShowAnswer = true; // Try false
window.addEventListener("load", function() {
  // when page loads
  quiz = document.getElementById("quiz");
  rads = quiz.querySelectorAll("input[type=radio]"); // all radios in the quiz
  document
    .getElementById("scoreButton")
    .addEventListener("click", function(e) {
      // on click of scoreme
      cur = quiz.querySelector("input[type=radio]:checked");
      par = cur.parentNode;
      var score = 0;
      for (var i = 0; i < rads.length; i++) {
        // loop over all radios in the form
        var rad = rads[i];
        var idx = rad.name.substring(1) - 1; //remove the q from the name - JS arrays start at 0
        var checked = rad.checked;
        var correct = !(answers.indexOf(cur.getAttribute("value")) == -1);
        rad.style.appearance = 'none';
        document.getElementById("scoreButton").style.display = 'none';
        
        if (!(answers.indexOf(rad.getAttribute('value')) == -1) && ShowAnswer) {
          rad.parentNode.classList.add("correct");
          rad.parentNode.innerHTML =
            `<span class="material-icons-round correct c">check</span>` +
            rad.parentNode.innerHTML;

        }
        if (correct) {
          par.classList.add("correct");
          par.innerHTML =
            `<span class="material-icons-round correct c">check</span>` +
            par.innerHTML;
        } else if (checked) {
          par.classList.add("error");
          par.innerHTML =
            `<span class="material-icons-round error e">close</span>` +
            par.innerHTML;
        }
      }
      
    });
});

.correct {
  color: green;
  font-weight: bold;
  text-decoration: underline;
}

.c {
  text-decoration: none;
  border-left: 0px;
  margin-left: -24px;
  /*From https://fonts.googleapis.com/icon?family=Material+Icons+Round*/
}

.error {
  color: red;
  font-weight: bold;
  text-decoration: line-through;
}

.e {
  text-decoration: none;
  border-left: 0px;
  margin-left: -24px;
  /*From https://fonts.googleapis.com/icon?family=Material+Icons+Round*/
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<form id="quiz">

  <div class="questions">
    <dl id="1">

      <dd><b>1. QUESTION.</b><br>
        <label><input type="radio" name="q1" value="1a"> 1. WRONG</label><br>
        <label><input type="radio" name="q1" value="1b"> 2. RIGHT</label><br>
        <label><input type="radio" name="q1" value="1c"> 3. WRONG But shown as right due to value in js</label>
      </dd>
    </dl>

    <input type="button" value="RESULT" id="scoreButton">
  </div>
</form>

Here is a PEN

Edited with replacement of choose option hiding!