How to preload material icons using rel=preload?

Question

I am trying to optimize my webpage with google lighthouse.

The report says to use rel=preloads on links that import Material Design Icons.

I have tried to preload them using syntax.

<link rel="preload" href="" as="style" crossorigin>

I have also tried to preload using as font. with type woff, woff2 and ttf. None of them seem to work. I have also added crossorigin and crossorigin="anonymous" but still no progress.

These are my actual links. I want to import both of them.

<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" as="style">
<link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="font" type="font/woff" crossorigin>

How should use these links with preload?

Answer 1

I would expect Google prepared preload info in it font guide, but there's only normal CSS example [1].

Anyway, I hacked the solution by adding:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&amp;display=swap" media="print" onload="this.media='all'" crossorigin>

(this seems to be a good fallback mechanism for not supported preload, so it's good to have anyway).

Also, to get rid of "blink" of name of icon, I am using code points [3]. Like that:

<i class="material-icons">&#xE87C;</i> (instead of <i class="material-icons">face</i>).

That way, during font load I get almost invisible symbol like □ instead of full "face".

[1] - https://google.github.io/material-design-icons/

[2] - https://csswizardry.com/2020/05/the-fastest-google-fonts/

[3] - https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

Answer 2

This worked for me:

<link 
  rel="preload"
  as="style" onload="this.rel = 'stylesheet'"
  href="https://fonts.googleapis.com/icon?family=Material+Icons">

Answer 3

I noticed that Google Fonts places a &display=swap to the end of the link when getting the url. So when we change it to display=block it would make a change in the css file on the server side:

font-display: block;

So use it like this:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">