The issue is that MUI uses different text colors with opacity, hsla(..., opacity) to make it appear not filled in. But WebKit browsers like Safari don’t honor the opacity in text color, and always display emojis with full opacity. (React Native had a similar issue a while back: facebook/react-native#2241)

You can change the global theme component style instead to use opacity and use the same text color as filled icons: https://github.com/rowyio/rowy/blob/enhancement/513-ratings-customized-icons/src/theme/components.tsx#L1376

      MuiRating: {
        styleOverrides: {
          icon: {
            // https://github.com/mui/material-ui/issues/32557
            "& .MuiSvgIcon-root": { pointerEvents: "auto" },
            color: theme.palette.text.secondary,
          },
          iconEmpty: { opacity: 0.38 },
        },
      },

Then you also don’t need to make Icon into a separate component and keep the code simple like previously.

Thanks @mshamsrainey.

Please don’t merge from main, as it’s a stale branch. Since the PR is into develop, please merge from develop instead. It appears that the package.json and yarn.lock updates downgrade and remove some dependencies, which have prevented the app from running on my machine.

It’s easier to make a new branch off develop when starting a new PR to prevent issues like merging from one of our branches, to prevent issues with dependencies.

I also want to make the point that you’re not expected to look at React Native issues since we don’t use React Native at all. I linked to that issue as an example, after Googling the primary issue of text color.