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?

Sound

Have you take a look into developers.google.com/web/tools/lighthouse/audits/noopener ? – Ellata

yes, but I don't get what it has to do with preloading. – Sound

I'm facing the same problem, did you find a solution? – Acrilan

not yet. I left it be for a while. will update if I find anything. – Sound

Here is a very useful article I found on this topic: ashton.codes/preload-google-fonts-using-resource-hints . Hope it helps others looking to know it in-depth. – Pika

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

Oldenburg

Answer 2

This worked for me:

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

Cornel

This is quite clever, but I don't think I'd recommend this method unless it's a last-resort. – Exciting

@Exciting Why is it not recommended? Could you elaborate in your comment? It is the only thing that actually worked so far... – Emmalynn

The embedded onload attribute JS that changes this into a stylesheet link seems a little hacky and on larger projects may be confusing and difficult to troubleshoot. If it's the only way you've found that works, go for it– I'd just document it as much as possible so your collaborators (or yourself in the future) can debug it without confusion later on. – Exciting

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">

Myrmecology

Answer 4

The icons can be preloaded by placing a transparent icon on the entry page in your app. This works well if the entry page does not contain any other icons that need to be displayed.

index.html:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" />  
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

home.component.ts:

<span class="material-symbols-outlined transparent">home</span>
<span class="material-icons-outlined transparent">edit</span>

home.component.scss:

.transparent {
    color: transparent;
}

Depressant

Answer 5

<link rel="preload" href="https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf" as="font" type="font/ttf" crossorigin="anonymous">

<style>
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
  }
  .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;
  }

</style>

Ramulose

Not sure why this answer is down-voted. Looks like it is only missing the src attribute in @font-face definition, e.g. src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf), but otherwise this is how you want to download the "font" file itself. Preloading the CSS does not really help much to resolve that Lighthouse warning until you preload the font file too. – Pika