vuetify v-chip close icon not showing

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',
      },

Answer

Problem solved thanks to the input I had. I had to use “md” as iconfont, see first post.

Advertisement

Answer