Repository: material-ui
Issue: [joy-ui] fontSize property on MUI Icons does not comply with TypeScript rules
Labels: typescript,package: icons,package: joy-ui

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/blissful-night-4v3x2j?file=%2Fsrc%2FDemo.tsx (The one available in the offcial "[Material UI Icons Size doc](https://mui.com/joy-ui/integrations/icon-libraries/#size)")

As you can see, it happens even in the live example codesandbox IDE of the official doc.

Steps:

1. Include any Material UI Icon in your code. i.e:
```
import Person from '@mui/icons-material/Person';
...
<Person />
```
2. Add it the fontSize property with any of the officially supported sizes (xs, sm, md, lg, xl, xl2, xl3 or xl4):
```
import Person from '@mui/icons-material/Person';
...
<Person fontSize="xl2" />
```
4. You will see the icon size applied, **but the code will be highlighted with a TypeScript error** telling that the only supported sizes are "small, medium or large", while none of these values actually works if you followed the "[Material UI Icons Installation instructions](https://mui.com/joy-ui/integrations/icon-libraries/#installation)".

![image](https://github.com/mui/material-ui/assets/11983593/c12c78c0-d075-465f-b22c-04c25ba94b60)


### Current behavior 😯

- Putting the correct values (xs, sm, md, lg, xl, xl2, xl3 or xl4) in fontSize property works, **but TypeScript error is raised**.
- Putting the incorrect values (small, medium or large) in fontSize property doesn't work, but TypeScript likes it.

### Expected behavior 🤔

- Putting the correct values (xs, sm, md, lg, xl, xl2, xl3 or xl4) in fontSize property works and TypeScript likes it.
- Putting the incorrect values (small, medium or large) in fontSize property doesn't work and TypeScript raise an error.

### Context 🔦

Just trying to customize the size of icons inside my app with the official fontSize prop to avoid css granular customization.

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 120.0.6099.111 (Build oficial) (64 bits)
    Firefox: 121.0 (64-bit)
    Edge: 120.0.2210.77 (Compilación oficial) (64 bits)
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.29
    @mui/core-downloads-tracker:  5.15.2
    @mui/icons-material: ^5.15.2 => 5.15.2
    @mui/joy: ^5.0.0-beta.20 => 5.0.0-beta.20
    @mui/material: ^5.15.2 => 5.15.2
    @mui/private-theming:  5.15.2
    @mui/styled-engine:  5.15.2
    @mui/system: ^5.15.2 => 5.15.2
    @mui/types:  7.2.11
    @mui/utils:  5.15.2
    @types/react: 18.2.20 => 18.2.20
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.1.6 => 5.1.6
```
</details>
<details>
  <summary><code>tsconfig</code></summary>

```
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "@mui/material": ["./node_modules/@mui/joy"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
```
</details>