Treeshaking fonts - How to reduce a font's filesize

[cimpok]

I see my Vue + Quasar application is importing the material-icons.css styles which results the fetching of a ~120kB .woff2 font file.
I would like to reduce the network traffic to the minimum, but this font file significantly adds my whole app in size. Knowing that the only icons my app uses from this font are the up and down pointing triangles in a drop down menu title, it is really an overkill.

Before I start to edit somehow the font file to a custom font with only two characters, I wanted to ask you what is the good practice to reduce the unnecessary network load in this case.
Should I replace these characters in Quasar to my own .svg icons and do not use the material font file at all?
Can it be made automatically, is there such a thing as tree-shaking a font file?
If I do it manually, what editor would you recommend to generate a subset from an existing woff/woff2 font? There must be a good tool for this somewhere.

[hawkeye64]

@cimpok

Should I replace these characters in Quasar to my own .svg icons and do not use the material font file at all?

Yes!
For icons, IMO, it's best to ditch the font (woff, woff2) files altogether and use the SVG version for tree-shaking. See here for more info: https://quasar.dev/vue-components/icon#svg-icons

[cimpok]

Thank you hawkeye64 for pointing me in the right direction.
For those interested I would also recommend watching this video I found since:
Quasar & Vue 3: Custom Icon Library - Part 2 (IconSets!)

[Apkovy]

Hi, I do not want to open the new discussion so I will ask here.

I have the same problem, but with material symbols outlined.

In my old project I managed to reduce the original woff2 file from 3.4MB to 900kB, which was quite acceptable for me. I did it by specifying only the font parameters I needed:

https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200..700,0..1,0

which inside has this url:

https://fonts.gstatic.com/s/materialsymbolsoutlined/v249/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1Q.woff2

The quasar project in extras/build/material-symbols.js seems to fetch the whole woff2 font without possibility to specify option parameters in url:

const response = await fetch('https://fonts.google.com/metadata/icons?key=material_symbols&incomplete=true')

Is it possible to somehow achieve this in quasar?

Thanks.