javascriptvue.jsvuetify.jsmaterial-design-icons

vuetifyjs: Adding only used icons to build


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/font@3.x/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:


Solution

  • 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