[joy-ui] fontSize property on MUI Icons does not comply with TypeScript rules

[CeuxDruman]

Duplicates

• I have searched the existing issues

Latest version

• 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")

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".

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 🌎

npx @mui/envinfo

  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

tsconfig

{
  "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"]
}

[siriwatknp]

I think for workaround, you can add this to your app or theme file:

import type { TypographySystem } from '@mui/joy/styles';

type FontSizeOverrides = { [k in keyof TypographySystem]: true };

declare module "@mui/material/SvgIcon" {
  interface SvgIconPropsSizeOverrides extends FontSizeOverrides {}
}

[GziAzman]

@siriwatknp Not sure about keys in TypographySystem, as it lists "body-sm", "body-md", etc.
What we want, from joy-ui documentation are sizes from xs to xl4

I managed to workaround the issue, that way:

// global.d.ts
import '@mui/joy/styles';

type SvgIconFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl2' | 'xl3' | 'xl4';

type FontSizeOverrides = { [k in SvgIconFontSize]: true };

declare module '@mui/material/SvgIcon' {
  interface SvgIconPropsSizeOverrides extends FontSizeOverrides {}
}

Values from SvgIconOwnProps.fontSize (large/medium/small) are still suggested, but at least, I can put the good ones, without crashing my build.