vuetifyjs: Adding only used icons to build

Question

I'm currently build a vuetifyjs-app with the default "Material Design Icons". In the production build I only use 2 Icons of this font (used by vuetify-component chips).

As recommend I included the complete iconfont with

<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

But the production-build this force the user to download almost 0.5MB of Data only for 2 icons. Is there any way to:

• Include only needed Icons in the CDN-Request or
• Use Tree-Shaking to include only the icons in need in the main CSS file? (i'm using parcel.js builder)

Answer 1

We recommend using @mdi/js where possible. This provides an ES Module which exports the SVG path of every icon in the icon set and supports treeshaking. You simply pass the icon string to an SVG path element or in this case you can pass it directly to v-icon if you specify the icon font in the Vuetify config: iconfont: 'mdiSvg'.

Installation

npm install @mdi/js

Usage

<template>
  <v-icon>{{ mdiCheck }}</v-icon>
</template>

<script>
  import { mdiCheck } from '@mdi/js'

  export default {
    data: () => ({
      mdiCheck,
    }),
  }
</script>

You can read more about integration with Vuetify here: https://vuetifyjs.com/en/customization/icons#install-material-design-icons-js-svg