MaterialIcon component should not load the material icon font (blocks page load)

Hello, I’m using the code in an app and totally enjoying the library:

about app

• Static site
• Hosted on firebase
• Bundled/transpiled with webpack/babel-loader
• Bundled using webpack rules to import SCSS directly from node_modules/@material/*

issue: slow rendering (fonts)

I noticed this when I ran Lighthouse (with emoji commentary) 😑 Opportunities 

 🤔 ok cool, go find in devtools… 

🤔 ok, go to bundle…

found this CSS import in https://github.com/material-components/material-components-web-react/tree/master/packages/material-icon: @import url(https://fonts.googleapis.com/icon?family=Material+Icons);

🤔 ok, go get that resource in chrome…

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format('woff');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

💪 ok cool, MaterialIcon has sass with this fonts.gstatic.com URL.

Basically any of these fonts in css files that are in HEAD will block rendering on the network if the user puts a link to the css file in head or in a style tag.

So I pre-loaded https://fonts.googleapis.com/icon?family=Material+Icons in the head of my HTML, and could preload the woff file also, but that is not really a stable way to go about it since any of the packages in the chain could break without warning.

try to fix issue

I was able to configure webpack to consume the @ material sass directly, but because of this URL I don’t know how to make this code lighthouse-friendly without putting it after the body. I may be doing something wrong at a higher level.

solution?

TL;DR: Could we come up with a way to bundle in the font resources? Or SVGs? Maybe that takes the form of documentation or an example.

My sense is that some users are going to write this off as being slow rather than tear in to the details, so if we could make stuff ‘just work’ as they say, it’d be great. Surely for places like the Top Navbar in-line SVGs would be more performant than an icon font. (I think it’s ~62kb) Maybe I don’t know about a bundler that would let me resolve this, the closest thing I found was https://www.npmjs.com/package/google-fonts-plugin, but I don’t know how I’d connect it to this code as a user.

Where’d I go wrong here? Is there something on the roadmap that I’d want to know about?

[johnelliott]

Nice work 😃 I am looking forward to using the lib more.

[lynnmercier]

When we update the MaterialIcon code so it does not download the material icon font…we should also provide documentation to our users on how to lazy load the material icon font.