vuetify.jsmaterial-design-icons

Is a specific Vuetify icon font more performant than others?


Vuetify offers a few icon font options:

https://vuetifyjs.com/en/features/icon-fonts/#usage

Is there any performance difference with these choices?


Solution

  • The actual runtime performance should be pretty similar, the main difference is how much data they load.

    Material Icons is google's official icon set. It uses a ligature font which is about 125kB.

    Material Design Icons is a third-party project that contains all of google's icons plus a few thousand custom ones, and is pretty big with 324kB (52kB gzipped) of CSS and a 384kB font.

    Material Design Icons - JS SVG is a 2.7MB (750kB gzipped) js file, but it allows you to import only the icons you're using so in practice is much smaller.