vuetify v-chip close icon not showing

Question

I have just upgraded vuetify from 1.5 to latest 2.1.12. My v-chips are now missing their close icons. They are simply not visible.

Even if I create a very simple v-chip I don't see the icon. This is an example of a chip:

<v-chip close>No close icon, why?</v-chip>

In version 1.5 of vuetify I can see that the "close" prop makes the html render a div inside the chip with class "v-chip__close" but there is no such html for the chip in v2.1.12 hence I do not see the close button.

Also, the "sort arrow icon" and the "next/previous page icon" in the data-table headers are also not showing. I sort of suspect that it is the for same reason.. In this case though, tables are sortable and it is possible to switch page, at least the "change page" icon is there but it is not visible..

Update: Checkboxes and radiobuttons are not visible either. They are there and clickable but not visible..

app.js:

import Vue from "vue";
import axios from "axios";
import router from "./router/index";
import store from "./store/store";
import { sync } from "vuex-router-sync";
import App from "components/app-root";
import { FontAwesomeIcon } from "./icons";
//import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Ensure you are using css-loader
import Editor from "@tinymce/tinymce-vue"
import globalMixins from "./components/common/mxins/global";

Vue.component("icon", FontAwesomeIcon);
Vue.component("tinymce-editor", Editor)

// axios now available globally in vue components (use "this.$http")
Vue.prototype.$http = axios;
sync(store, router);
Vue.mixin(globalMixins);

//import Vuetify from "vuetify/lib";
import Vuetify from 'vuetify'  // For full install, DO NOT use "vuetify/lib"
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);
const vuetify = new Vuetify({
  icons: {
    iconfont: 'fa4',
  },
  theme: {
    themes: {
      light: {
        my1: "#2196F3",
      },
      dark: {
        my2: "#2196F3",
      }
    }
  }
});

Vue.use(require("vue-shortkey"));

Vue.filter('formatSize', function (size) {
  if (size > 1024 * 1024 * 1024 * 1024) {
    return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB'
  } else if (size > 1024 * 1024 * 1024) {
    return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
  } else if (size > 1024 * 1024) {
    return (size / 1024 / 1024).toFixed(2) + ' MB'
  } else if (size > 1024) {
    return (size / 1024).toFixed(2) + ' KB'
  }
  return size.toString() + ' B'
});

var VueCookie = require('vue-cookie');
Vue.use(VueCookie);    

Vue.use(require('vue-moment'));

const app = new Vue({
  vuetify,
  store,
  router,
  ...App
});

export { app, router, store };

Any suggestions what I could test or change to maybe make it work?

Update Since fontawesome wasn't used (probably added by previous developer at some stage) I removed the file icons.js compeletely and commented the imports. Standard icons are still not showing though..

Updated app.js (where fontawesome-stuff is commented)

import Vue from "vue";
import axios from "axios";
import router from "./router/index";
import store from "./store/store";
import { sync } from "vuex-router-sync";
import App from "components/app-root";
//import { FontAwesomeIcon } from "./icons";
//import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Ensure you are using css-loader
import Editor from "@tinymce/tinymce-vue"

//Vue.component("icon", FontAwesomeIcon);
Vue.component("tinymce-editor", Editor)

Vue.prototype.$http = axios;
sync(store, router);
import globalMixins from "./components/common/mxins/global";
Vue.mixin(globalMixins);
import Vuetify from 'vuetify'  // For full install, DO NOT use `vuetify/lib`
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);
const vuetify = new Vuetify({
  icons: {
    //iconfont: 'fa4',
  },
  theme: {
    themes: {
      light: {
        st1: "#2196F3"
      },
      dark: {
        st2: "#2196F3"
      }
    }
  }
});

Vue.use(require("vue-shortkey"));
var VueCookie = require('vue-cookie');
Vue.use(VueCookie);
Vue.use(require('vue-moment'));

const app = new Vue({
  vuetify,
  store,
  router,
  ...App
});

export { app, router, store };

Update Solution I added this to my app.js and now it seems to be working:

const vuetify = new Vuetify({
      icons: {
        iconfont: 'fmd',
      },

Please share you App.vue and main.js files. We'll have to see if Vueitfy 2.0 is installed correctly imported in your project or not. — Ankit Kante
Hello Ankit! I have only an app.js. There is no main.js My post updated now, thanks! — Toby Fieldgroove
I went through the documentation of the library that you are using: github.com/FortAwesome/vue-fontawesome The import statements in you icons.js seems to be wrong. Can you cross check the version number and use the correct import statements? — Ankit Kante
Did u remove the icons key in the line where vuetify variable is being created? Because that's the only way the icons won't show up. Can you post the updated app.js in your question as well? The one without fontawesome stuff. — Ankit Kante
Thank you, it seems as if I had to change the iconfont to "md", wouldnt have figured it out without your input, a million thanks!! — Toby Fieldgroove

Luca Rossi Luca Rossi · Accepted Answer · 2019-11-30T13:53:18

I suggest you to import font-awesome in this way:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faEnvelope, faGraduationCap, faHome, faTags, faList, faSpinner } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faEnvelope, faGraduationCap, faHome,faTags, faList, faSpinner)

Vue.component('font-awesome-icon', FontAwesomeIcon)

vuetify v-chip close icon not showing

2 Answers