After upgrading Vuetify from version 1.5 to the latest 2.1.12, I noticed that the close icons on my v-chips are missing. They are nowhere to be seen.
Even when creating a basic v-chip, the icon does not appear. Here's an example:
<v-chip close>No close icon, why?</v-chip>
In Vuetify version 1.5, adding the "close" prop resulted in the rendering of a div inside the chip with the class "v-chip__close". However, in version 2.1.12, this specific HTML code is absent, hence the missing close button.
Furthermore, the sort arrow icon and the next/previous page icon in the data-table headers are also not displaying. I suspect it may be due to the same reason. While the tables remain sortable and page-switchable, the icons are invisible.
Update: Checkboxes and radio buttons are experiencing the same visibility issue. They exist on the page and can be clicked, but they are not visible.
Here's a snippet from app.js:
import Vue from "vue";
// other imports...
Vue.use(require("vue-shortkey"));
// more code...
export { app, router, store };
Any recommendations for troubleshooting or modifications that could potentially resolve these issues?
Update Since Font Awesome was not being utilized (potentially added by a previous developer), I completely removed the file `icons.js` and commented out related imports. Standard icons still remained unseen though.
Revised app.js (with fontawesome-related content commented out):
import Vue from "vue";
// other imports...
Vue.use(require("vue-shortkey"));
// more code...
export { app, router, store };
Update Solution I included this line in my app.js file and now everything seems to be functioning as expected:
const vuetify = new Vuetify({
icons: {
iconfont: 'fmd',
},