0

I am using Icons as symbols in my React app that is using Material UI library. I added the baseClassName: 'material-symbols-rounded' to all my icons using the theme.js global file like this:

MuiIcon: { defaultProps: { baseClassName: 'material-symbols-rounded' }},
MuiIconButton: { defaultProps: { className: 'material-symbols-rounded' }}

On the Google Icon Symbols documentation it states that I could add a FILL 1 to change the look from outlined to filled. I can't seem to make it work. i tried adding it as a style directly to the MUI Icon component, tried adding a stylerOverride to the theme.js MUIIcon root style object and nothing seems to be work. Any ideas how can I add the fill to the MUI Icon component since I am using Icons as symbol and not Icons?

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
Kevin Garcia
  • 53
  • 9

1 Answers1

0

To solve this you can modify the stylesheet link to accept the different opsz, wght, FILL, GRAD combinations (ex. opsz,wght,FILL,GRAD@24..48,200..1000,0..1,0):

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,200,0..1,0" rel="stylesheet" />

You can then target the setting style as follows:

fontVariationSettings: "'FILL' 1"
Kevin Garcia
  • 53
  • 9