Reimplemented radio icon

src/components/datatable/RowRadioButton.vue

@@ -4,7 +4,7 @@
            <input ref="input" type="radio" :checked="checked" @focus="onFocus($event)" @blur="onBlur($event)" :disabled="disabled">
         </div>
         <div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
-            <span :class="['p-radiobutton-icon', {'pi pi-circle-on': checked}]"></span>
+            <div class="p-radiobutton-icon"></div>
         </div>
     </div>
 </template>

src/components/radiobutton/RadioButton.css

@@ -9,4 +9,17 @@
     display: flex;
     justify-content: center;
     align-items: center;
+}
+
+.p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(.1);
+    border-radius: 50%;
+    visibility: hidden;
+}
+
+.p-radiobutton-box.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1.0, 1.0);
+    visibility: visible;
 }

src/components/radiobutton/RadioButton.vue

@@ -4,7 +4,7 @@
            <input ref="input" type="radio" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)">
         </div>
         <div ref="box" :class="['p-radiobutton-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
-            <span :class="['p-radiobutton-icon', {'pi pi-circle-on': checked}]"></span>
+            <div class="p-radiobutton-icon"></div>
         </div>
     </div>
 </template>