Installing Google Material icons using Setup Method 2 self hosting for our React project the ligatures associated with the icon is sometimes displayed before the material icon.
<i class="material-icons">face</i> {/* shows text "face" on site prior to proper material icon load */} For example the above line would display "face" for a second before showing a face. How can we delay the UI rendering until the file references are fully loaded?
/*material icons file references loaded locally */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */src: local('Material Icons'), local('MaterialIcons-Regular'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
There are a few options you can consider to delay the rendering of the UI until the file references are fully loaded:
Use a loading spinner: You can show a loading spinner while the file references are being loaded, and then hide the spinner and show the UI once the file references are fully loaded. This can be done using a simple boolean flag and a conditional rendering in your JSX.
Use the window.FontFace API: The window.FontFace API provides an interface for loading font files and allows you to specify a callback function that will be called once the font is fully loaded. You can use this callback function to trigger the rendering of your UI.
Use the font-display property: You can use the font-display property in your @font-face rule to specify how the font should be displayed while it's loading. The font-display property can take one of the following values: auto, block, swap, fallback, or optional. You can set the font-display property to block to prevent the text from being displayed until the font is fully loaded.
Here's an example of how you can use the font-display property in your @font-face rule:
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */src: local('Material Icons'), local('MaterialIcons-Regular'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'), url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype'); font-display: block; /* prevent text from being displayed until the font is fully loaded */ }