title: Vue: Using material-design-icons offline / size
body: <p>I am using materialdesignicons in my vue project. </p>
  
  <pre><code>require ('../node_modules/@mdi/font/css/materialdesignicons.min.css);
  Vue.use(Vuetify, {iconfont:'mdi'});
  </code></pre>
  
  <p>I have a handful of icons which I dynamically create:</p>
  
  <pre><code> &lt;v-icon&gt;{{ some-mdi-file }}&lt;/v-icon&gt;
  </code></pre>
  
  <p>When I build for production via (npm run build) I get the following error:</p>
  
  <pre><code>asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
  This can impact web performance.
  Assets:
    img/materialdesignicons-webfont.someHash.svg (3.77 MiB)
  </code></pre>
  
  <p>That file size is huge because it includes every icon, regardless of whether it's being used. Is there a way to trim that file size down by only packaging the specific icons used. Is there a different package I should be using? Caveat: The project is hosted offline, so I need to include the fonts directly in my project.</p>
  
  <p>I looked at vue-material-design-icons but it looks like it may not work for dynamic icon names and it says nothing about the overall file size/performance.</p>
  
  <p>I have also looked here but clicking on the 'size warning' link brings me to a page where the Vue portion is not filled out
  <a href="https://dev.materialdesignicons.com/getting-started/webfont" rel="nofollow noreferrer">https://dev.materialdesignicons.com/getting-started/webfont</a></p>