[Icon] Hide name placeholder while "Material Icons" font is loading

As a current behavior, when you use something like <Icon>lock</Icon> and refresh a page, it’s up to luck if the browser currently has the https://fonts.googleapis.com/icon?family=Material+Icons font cached or not (if you set your developer tools to clear cache on refresh, which may be often needed for development purposes, you may see this artifact occur every single time). This can cause something like “lo” be rendered due to the icon being too small when styled, causing a terrible user experience. I’ve been looking for workarounds, and there’s an option like using a <Icon className={classes.materialIcon}> after const classes = useStyles(); with a following style:

const useStyles = makeStyles(() =>
     createStyles({
         materialIcon: {
           "&:before": {
                content: '""',
            },
         },
     })
 );

However, this may cause additional false positives, as the icon disappears while loading a page even if it’s cached. There’s no mention of this problem within documentation. Is there any correct solution?

[oliviertassinari]

@DanailH It’s a trivial change, the most interesting part is to get through the git repo clone, open pull request, review, merge workflow. IMHO after 1 or 2 good first issues, it’s not worth doing more 😃

[DanailH]

@oliviertassinari Ok then I would like to give it a try 😃