Use filled and outlind version of Google Material Design Icon Font in vue 3.0 with vuetify 3.0

Question

I want to use Google Material Design Icon Font in my vue3.0 project where I also use vuetify 3.0.

The steps I followed to achieve this are:

1. In main.ts file, set the default icon to md (imported from vuetify iconsets)

   

2. Use google icon name in the vuetify component v-btn. Here, picture_as_pdf is the name of google material disign icon.

    <v-btn
       rounded="pill"
       class="bg-lightgrey ma-2"
       prepend-icon="picture_as_pdf"
       @click="emit('generateReport')"
     >
       Export
     </v-btn>
   

3. It will show you a filled version of icon.

Everything is good till now. But I want to use both outlined as well as filled version of google material design icon.

I have solution for this problem but it is not working with vuetify component. Does anyone have any solution for this?

Sharing my solution with you all which is working fine with normal html tags but not working with vuetify components.

Steps:

1. Add the cdn link (for filled and outlined both) to the html file

   <link
     href="https://fonts.googleapis.com/css? 
     family=Material+Icons|Material+Icons+Outlined"
     rel="stylesheet"
       />
   

2. In the component template

   <span class="material-icons">face</span> 
   <span class="material-icons-outlined">face</span>
   

NOTE: It worked well but when I use it in vuetify component let's say v-btn, it is not working.

Answer 1

You can register a custom iconset renderer in the Vuetify configuration:

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdio',
    sets: {
      mdio: {
        component: props => h(VLigatureIcon, {
          ...props,
          class: 'material-icons-outlined' // <---- set class to your outline class 
        })
      }
    }
  }
})

The VLigatureIcon Component is a semi-internal Vuetify component, it doesn't do much, so you can easily write your own if it does not work for you.

But for the outlined font, it does, have a look at the snippet:

const {createApp, ref, h} = Vue;
const {createVuetify} = Vuetify

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdio',
    sets: {
      mdio: {
        component: props => h(Vuetify.components.VLigatureIcon, {
          ...props,
          class: 'material-icons-outlined'
        })
      }
    }
  }
})

const app = {
  setup() {
    return {
      icons: ref(['add', 'open_in_new', 'indeterminate_check_box', 'view_timeline', 'create_new_folder'])
    }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-main>

      <v-container>
        <v-row align="center" justify="center">
          <v-col cols="auto"v-for="icon in icons" :key="icon">
            <v-btn :icon="icon"></v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>