Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

How would one import the 'md' icons locally, similar to how they import the mdi ones in this post: How to import the mdi icons module inside nuxt.config.js in Nuxt

Either the standard package or the custom repo https://github.com/jossef/material-design-icons-iconfont I'm using the nuxt-vuetify plugin. All my attempts have failed, e.g adding this:

nuxt.config.js

css: ['~/assets/main.css', './node_modules/material-design-icons-iconfont/dist/material-design-icons.css'],
vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true,
  defaultAssets: {
    font: false,
    icons: 'md',// this just fetches it from the repo
// icons: {iconfont: 'md'} // this doesn't seem to work for me
    enter code here
    theme: {
      dark: false,
      themes: {
        light: {
          primary: '#fec655',
                Vuetify has material icons integrated. I am also developing in vuejs, nuxtjs. I just installed font using this command npm install @mdi/font -D and i can use any material icon mdi-iconname inside v-icon. check this vuetifyjs.com/en/features/icon-fonts
– Mohammad Salim Hosen
                Jun 2, 2021 at 16:12
                Yes, but this is about the 'md' library and not the mdi one :). Adding md vs. mdi locally ended up just being about switching out the global css import.
– Thorvald
                Jun 2, 2021 at 16:21
I ended up solving it right after I posted it.
In the end, the settings in the original questions are correct.
One simply has to install the 'md' package from the original source or https://www.npmjs.com/package/material-design-icons-iconfont
After that, it's just a matter of changing the global CSS import.
css: ['./node_modules/material-design-icons-iconfont/dist/material-design-icons.css'],
A sidenote is that it seems to be possible to use both 'md' and 'mdi' by installing mdi/js for the treeshaken version & making imports manually.
This way, you can use the default icons for all the components but still add more icons from MDI if needed. Since the 'mdi' bundle is around 330kb while the 'md' one is only around 80kb this saves quite a lot of space.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.