CODEWITHSUNDEEP
reactjsmaterial-design
sammarcow
sammarcow

Reputation: 2956

google material icons loading slowly, flicker from text to icon

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');
    }

Upvotes: 22

Views: 5586

Answers (3)

Filipe F. Freitas
Filipe F. Freitas

Reputation: 1

just use a "preload" with link tag as :

<link rel="preload" href="./material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin>

Upvotes: 0

Kishor Ahir
Kishor Ahir

Reputation: 1

Create a file called preload.js in your src folder.

document.fonts.load('10pt "Material Icons"').then(function () {
  console.log('Material Icons font has been preloaded.');
});

add the following script tag at the end of the head section in index.html

<script defer src="%PUBLIC_URL%/preload.js"></script>

user in your React component like this

import Icon from '@material-ui/core/Icon';

 function MyComponent() {
   return <Icon>home</Icon>;
 }

I hope it's working

Upvotes: 1

mike mckechnie
mike mckechnie

Reputation: 874

Answer from How to prevent material icon text from showing up when Google's JS fails to convert them?:

you can use font-display: block;, just add this CSS to your HTML head:

<style>
   @font-face {
      font-family: 'Material Icons';
      font-display: block;
    }
</style>

for more information font-display

Upvotes: -1

Related Questions