Right now I'm using Material Symbols for my website. It works great! It's pretty, easy to use and works great with my design. However, I'm noticing that it takes a LONG time to load. Once the *2.7 MB* file finishes loading and gets cached, the website loads pretty fast. I'm loading the file using a CSS import:

@import url('+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');

But loading using an HTML tag is still super slow. It's taking up to *30 SECONDS* to load those 2.7 MB on the Fast 3G preset. Other fonts (also imported using a CSS import) take at most 500ms to load (under that same 3G preset). Why is Material Symbols taking so long to load? What can I do about it? I know for sure I don't need all those icons, so how can I only load the icons I need? Or is this normal?

I tried importing the CSS file in other ways, such as an HTML tag, import it using JS and even using the static icon font, instead of the variable one. It's still taking a lot of time though. Other fonts used to have this issue, and I solved it by removing the Italics because I wasn't using them. That seems to have fixed the issue. However, AFAIK you can't do something similar with the Material Symbols font.

Right now I'm using Material Symbols for my website. It works great! It's pretty, easy to use and works great with my design. However, I'm noticing that it takes a LONG time to load. Once the *2.7 MB* file finishes loading and gets cached, the website loads pretty fast. I'm loading the file using a CSS import:

@import url('https://fonts.googleapis./css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');

But loading using an HTML tag is still super slow. It's taking up to *30 SECONDS* to load those 2.7 MB on the Fast 3G preset. Other fonts (also imported using a CSS import) take at most 500ms to load (under that same 3G preset). Why is Material Symbols taking so long to load? What can I do about it? I know for sure I don't need all those icons, so how can I only load the icons I need? Or is this normal?

I tried importing the CSS file in other ways, such as an HTML tag, import it using JS and even using the static icon font, instead of the variable one. It's still taking a lot of time though. Other fonts used to have this issue, and I solved it by removing the Italics because I wasn't using them. That seems to have fixed the issue. However, AFAIK you can't do something similar with the Material Symbols font.

• javascript
• html
• css
• fonts
• material-design

4 Answers 4

I found a solution, you can manipulate the font request of the file and take only what you need: https://fonts.googleapis./css2?family=Material+Symbols+Outlined

This is the base link and you get all, you can filter by adding :opsz,wght,FILL,GRAD and then the tuple @20..48,100..700,0..1,-50..200

In the tuple you have to specify the numbers in the right order (20..48 is referred to opsz.

You can pletely remove an option, I only took wight from 100 to 400 and only filled and not filled icons reducing the size of the woff2 file from 4MB to 700kb.

Hope this can help, I think is the better solution.

My personal example: https://fonts.googleapis./css2?family=Material+Symbols+Outlined:wght,[email protected],0..1

/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 400;
  src: url(https://fonts.gstatic./s/materialsymbolsoutlined/v122/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1Q.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  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;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Im trying to find some solution and nothing... I can tell that the problem is caused by the variant of the font, every variant that you can use is single-handled and this course a really big number of icon in the woff2 file.

I have downloaded a sub-set of icons from google that weighs really less 200kb, you can download it from the link: https://fonts.gstatic./s/materialsymbolsoutlined/v122/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2

I found this link in the google font style page: https://fonts.googleapis./css2?family=Material+Symbols+Outlined

You can try to download the font and host it in your server, maybe you can optimize the font with some online tools and remove all the variant that you don't need. Hope you find a better solution

Late reply but i also found i neat improvement for this problem.

In the link which loads the icons you can name all the icons you need at the end so only these ones get loaded. Keep in mind, that you have to list the icons in alphabetical order

So i got from this:

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

To this:

<link rel="stylesheet" href="https://fonts.googleapis./css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=add,check,check_box,check_box_outline_blank,close,colorize,content_copy,counter_1,counter_2,counter_3,delete,edit,emoji_events,exit_to_app,expand_more,filter_hdr,home,keyboard_arrow_left,keyboard_arrow_right,local_bar,menu,person,person_remove,play_arrow,playing_cards,search,settings,share,skip_next,stop,undo,visibility,visibility_off,volunteer_activism,water_loss" />

As you can see there was a huge performance boost.

Try using a < link > instead of @import Or, choose any other icon library like Bootstrap, Fontawesome or Flaticon