Confusion Regarding opsz Font Variation and Actual Font Size in "Material Symbols"

[miyarappo]

Hello,

I recently encountered an issue when trying to use the opsz font variation with the "Material Symbols" library. My expectation was that setting the opsz value would directly influence the font size of the icon, but this did not seem to be the case. Instead, I had to manually adjust the fontSize in CSS to achieve the desired size.

Steps to Reproduce:

Use the Material Symbols library in a Next.js project.
Create a React component to display an icon with the opsz value set to 48.

interface Props {
  name: string
  className?: string
  type?: 'outlined' | 'rounded' | 'sharp'
  fill?: boolean
  weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700
  grade?: -25 | 0 | 200
  opticalSize?: 20 | 24 | 40 | 48
}

export const MaterialSymbol = ({
  name,
  className,
  type = 'rounded',
  fill = false,
  weight = 400,
  grade = 0,
  opticalSize = 24,
}: Props) => {
  return (
    <span
      style={{
        fontVariationSettings: `'FILL' ${fill ? 1 : 0},
        'wght' ${weight},
        'GRAD' ${grade},
        'opsz' ${opticalSize}`,
      }}
      className={`inline-block flex-shrink-0 overflow-hidden material-symbols-${type} ${className}`}
    >
      {name}
    </span>
  )
}

<MaterialSymbol name="logout" opticalSize={48} />

Observe that the icon does not scale to the expected size.

Workaround:

Setting the fontSize directly in CSS works as expected.

Suggested Resolution:

It would be helpful if the documentation clarified the relationship (or lack thereof) between opsz and the actual rendered font size. Additionally, providing guidance on how users can correctly scale icons would be beneficial.

Thank you for your attention to this matter, and I appreciate the hard work that has gone into the library!