Vuetify using font-awesome icons in existing components

Question

I'm trying to follow the instructions on the vuetify docs for integrating font-awesome pro.

    Vue.use(Vuetify, {
        iconfont: 'fa',
        icons: {
            'dropdown': 'fal fa-arrow-down',
        }
    })

Existing components don't pick up these settings. the v-icon components that I don't create myself are still assigning the material-icons class. For example, the icon nested in <v-select> shows up as:

<i class="v-icon material-icons theme--light">arrow_drop_down</i>

I expected that passing a new value under icons.dropdown would change the icon in the <v-select>. Is that not how it's supposed to work?

Answer 1

This might be because the Vuetify plugin has already been installed. Calling Vue.use a second time won't do anything.

If you're calling it twice yourself then the solution is simple. However, it might not be you that's calling it the first time. The example below is using a CDN build of Vuetify and it automatically installs itself without any configuration options.

I haven't actually included FontAwesome but I've used some CSS to show a red square in place of the arrow to show that it is having an effect.

new Vue({
  el: '#app',
  data () {
    return {value: 'Red'}
  }
})

.fa-arrow-down {
  background: red;
  height: 8px;
  width: 8px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script>
(function() {
  const vueUse = Vue.use
  
  Vue.use = function (vuetify) {
    Vue.use = vueUse
    
    Vue.use(vuetify, {
      iconfont: 'fa',
      icons: {
        'dropdown': 'fal fa-arrow-down',
      }
    })
  }
})()
</script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-select v-model="value" :items="['Red', 'Green', 'Blue']"></v-select>
  </v-app>
</div>

You can see the automatic install on lines 19-21 of the source:

https://github.com/vuetifyjs/vuetify/blob/v1.5.14/packages/vuetify/src/index.ts

In the example above I worked around the problem by hooking into Vue.use just before I included Vuetify. Yes, it's a collosal hack, but it allowed me to insert the relevant config object.

An alternative would be to poke in the icons individually by modifying $vuetify directly.

Vue.prototype.$vuetify.icons.dropdown = 'fal fa-arrow-down'

You'd have to do this for each individual icon though, I don't believe there's an equivalent to passing the iconfont to set them all.

Vue.prototype.$vuetify.icons.dropdown = 'fal fa-arrow-down'

new Vue({
  el: '#app',
  data () {
    return {value: 'Red'}
  }
})

.fa-arrow-down {
  background: red;
  height: 8px;
  width: 8px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-select v-model="value" :items="['Red', 'Green', 'Blue']"></v-select>
  </v-app>
</div>

If you're not sure whether Vuetify has already been installed there are various ways to find out. Probably the simplest is to check whether Vue.prototype.$vuetify already exists. Alternatively you could put in a debugger statement just before you call Vue.use and step into the code to see what happens. If Vuetify is already installed you'll see it bail out pretty quickly.