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