chore(labs): fix checkbox & radio icon placement and customization

PiperOrigin-RevId: 901275472

Author: asyncliz

labs/gb/components/checkbox/checkbox.scss

@@ -64,19 +64,27 @@
       height: 48px;
       background-image: none;
       outline: none;
+      margin: 0;
+      --icon: 'check';
+
+      &:is(:indeterminate, .indeterminate)::before {
+        --icon: 'remove';
+      }
 
       &::before {
-        content: '';
+        content: var(--icon);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         box-sizing: border-box;
+        overflow: hidden;
+        aspect-ratio: 1;
         width: var(--container-size);
-        height: var(--container-size);
         background: var(--container-color);
         border-radius: var(--container-shape);
         border: var(--outline-width) solid var(--outline-color);
         color: var(--icon-color);
-        font-family: var(--md-icon-font);
-        font-size: var(--icon-size);
-        line-height: 1;
+        font: var(--icon-size) / 1 var(--md-icon-font);
       }
 
       &::after {
@@ -92,14 +100,6 @@
         transition: var(--ripple-transition);
         animation: var(--ripple-animation), var(--focus-ring-animation);
       }
-
-      &:is(:checked, .checked)::before {
-        content: 'check';
-      }
-
-      &:is(:indeterminate, .indeterminate)::before {
-        content: 'remove';
-      }
     }
   }
 }

labs/gb/components/radio/radio.scss

@@ -44,18 +44,17 @@
       height: 48px;
       background-image: none;
       outline: none;
+      --icon: 'radio_button_unchecked';
 
       &::before {
-        content: 'radio_button_unchecked';
+        content: var(--icon);
         color: var(--icon-color);
-        font-family: var(--md-icon-font);
-        font-size: var(--icon-size);
-        line-height: 1;
+        font: var(--icon-size) / 1 var(--md-icon-font);
         width: var(--icon-size);
         aspect-ratio: 1;
       }
       &:is(:checked, .checked)::before {
-        content: 'radio_button_checked';
+        --icon: 'radio_button_checked';
       }
       &::after {
         content: '';