Vuetify use 2 IconFonts

Question

Currently I'm using google fonts icons in my project, but I want to use also FAS5 Icons

I'm using this vuetify configuration, but the documentation doesn't say anithing about this.

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import colors from "vuetify/lib/util/colors";
import '@fortawesome/fontawesome-free/css/all.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.use(Vuetify);

export default new Vuetify({
    theme: {
        ...
    },
    icons: {
        iconfont: 'fa'
    }
});

This is a clumsy example of what I'm doing. But I'm afraid this is bad practice and may create bugs or errors

<v-btn icon @click="$vuetify.theme.dark = !$vuetify.theme.dark">
    <v-icon>nightlight_round</v-icon>
</v-btn>

<v-btn icon @click="$vuetify.theme.dark = !$vuetify.theme.dark">
    <v-icon>fa-moon</v-icon>
</v-btn>

Is there a proper way to achieve this?

score 0 · Accepted Answer · answered Jul 21 '21 at 13:31

As mentioned in this vuetify issue:

You need to install all fonts you need or add links to CDNs, iconfont only specifies which icon set will be used for default Vueitfy icons

So there is no way to load multiple fonts on initialization.

I would keep the mostly used font as default in the Vuetify config and load the other one as needed. In the Vuetify docs the same implementation of FA5 as yours is shown, so I would say you've done it correctly.

Vuetify use 2 IconFonts

1 Answers1