fix: [M3-7565] - Fix Radio size prop not affecting the radio button's dimensions (linode#11242)

* Customizing radio button sizes

* Added a sample

* Reverted sample

* Updated sizes for medium and small radio buttons

* Added changeset

* Wrapped radio icons in SvgIcon & added font sizes to themes/light.ts

* fixes

* linting fix

Author: zaenab-akamai

packages/manager/.changeset/pr-11242-fixed-1732004091597.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Radio size prop not affecting the radio button's dimensions ([#11242](https://github.com/linode/manager/pull/11242))

packages/ui/src/components/Radio/Radio.tsx

@@ -1,3 +1,4 @@
+import { SvgIcon } from '@mui/material';
 import { default as _Radio } from '@mui/material/Radio';
 import * as React from 'react';
 
@@ -26,9 +27,21 @@ import type { RadioProps } from '@mui/material/Radio';
 export const Radio = (props: RadioProps) => {
   return (
     <_Radio
-      checkedIcon={<RadioIconRadioed />}
+      checkedIcon={
+        <SvgIcon
+          component={RadioIconRadioed}
+          fontSize={props.size}
+          viewBox="0 0 25 25"
+        />
+      }
+      icon={
+        <SvgIcon
+          component={RadioIcon}
+          fontSize={props.size}
+          viewBox="0 0 25 25"
+        />
+      }
       data-qa-radio={props.checked || false}
-      icon={<RadioIcon />}
       {...props}
       inputProps={{
         'aria-checked': props.checked,

packages/ui/src/foundations/themes/light.ts

@@ -1094,6 +1094,16 @@ export const lightTheme: ThemeOptions = {
             fill: `${Color.Neutrals[5]} !important`,
             pointerEvents: 'none',
           },
+          '&.MuiRadio-root': {
+            '.MuiSvgIcon-fontSizeMedium': {
+              fontSize: '20px',
+            },
+          },
+          '&.MuiRadio-sizeSmall': {
+            '.MuiSvgIcon-fontSizeSmall': {
+              fontSize: '16px',
+            },
+          },
           '&:hover': {
             '& .defaultFill': {
               fill: theme.color.white,