Vue data component not loading up correctly. This is the exact template they used.
The arrows appear as "arrow_upward" and the edit and delete button don't show up right.
I have imported all the vuetify stuff in main.js. All my other vuetify UI components are working except for this one.
I had a similar problem. Following the link mdg provided, I solve the problem by changing the iconfont from mdi to mdiSvg
const opts = {
icons: {
iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
},
}
vuetify: new Vuetify(opts),
As Traxo commented you need to include the Google material icons font. There are two solutions:
Add the css link <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> to your <head>,
Use one of the available npm packages that provide Google's material icons and import the css as you've done with the other packages
Check the packages.json and ensure the webpack is up to date
However, ensure in main.js, you include the following
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
I specifically call out the font:
Vue.use(Vuetify, {
iconfont: 'mdi'
}
And have installed it.
$ npm install material-design-icons-iconfont
Vuetify Reference: https://vuetifyjs.com/en/framework/icons
