Google Material Symbol download size

Question

The download size of Google Material is large: 3.3 MB with the defaults:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

I have followed the advice to download only a certain variant:

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

and now the size is 242kB.

But since I am only using 2 of the symbols, is there any easy way (best not to involve storing the font on my server) to subset it? Thanks!

Answer 1

You can use the text query parameter to reduce the number of icons.

Since Material icons rely on ligatures you need to enter the names of the desired icons (See list of icons).

E.g for filtering to close and search icon we append this query parameter:

&text=closesearch

We can also remove duplicate characters (e.g "s", "e")

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  -webkit-font-feature-settings: 'liga';
}

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

<div class="material-symbols-outlined">close</div>
<div class="material-symbols-outlined">search</div>

The new subset font file is only ~ 4KB

Answer 2

You can also try to use the icons ids rather than the human readable names, for some icons their names overlap with other icons and if you use multiple icons you might end up with downloading more icons that the ones you need

e.g. something like this:

link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@36,300,0,0&text=&#xe853,&#xe834,&#xe872,&#xea5c,&#xea5b,&#xe9ba,&#xe887,&#xe158,&#xe8b8,&#xe3f4,&#xe8f4"