fix(radio): radio mark icon scales with font

core/src/components/radio/radio.ios.vars.scss

@@ -11,13 +11,13 @@ $radio-ios-color-on:                  current-color(base) !default;
 $radio-ios-background-color-focused:  ion-color(primary, tint) !default;
 
 /// @prop - Width of the radio icon
-$radio-ios-icon-width:                15px !default;
+$radio-ios-icon-width:                dynamic-font(15px) !default;
 
 /// @prop - Height of the radio icon
-$radio-ios-icon-height:               24px !default;
+$radio-ios-icon-height:               dynamic-font(24px) !default;
 
 /// @prop - Border width of the radio icon
-$radio-ios-icon-border-width:         2px !default;
+$radio-ios-icon-border-width:         dynamic-font(2px) !default;
 
 /// @prop - Border style of the radio icon
 $radio-ios-icon-border-style:         solid !default;

core/src/components/radio/radio.md.vars.scss

@@ -14,13 +14,13 @@ $radio-md-background-color-focused:  ion-color(primary, tint) !default;
 $radio-md-color-off:                 rgb($text-color-rgb, 0.60) !default;
 
 /// @prop - Width of the radio icon
-$radio-md-icon-width:                20px !default;
+$radio-md-icon-width:                dynamic-font(20px) !default;
 
 /// @prop - Height of the radio icon
-$radio-md-icon-height:               20px !default;
+$radio-md-icon-height:               dynamic-font(20px) !default;
 
 /// @prop - Border width of the radio icon
-$radio-md-icon-border-width:         2px !default;
+$radio-md-icon-border-width:         dynamic-font(2px) !default;
 
 /// @prop - Border style of the radio icon
 $radio-md-icon-border-style:         solid !default;

core/src/components/radio/test/a11y/radio.e2e.ts

@@ -94,3 +94,29 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('radio: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+        <ion-radio-group value="a">
+          <ion-radio value="a">Radio Label</ion-alert>
+        </ion-radio-group>
+      `,
+        config
+      );
+
+      const radioGroup = page.locator('ion-radio-group');
+      await expect(radioGroup).toHaveScreenshot(screenshot(`radio-scale`));
+    });
+  });
+});