vuetify data table component not loading up correctly

3
votes

enter image description here 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.

enter image description here I have imported all the vuetify stuff in main.js. All my other vuetify UI components are working except for this one.

4
vue.jsvuetify.js
did you include fonts as per documentation? – Traxo

4 Answers

3
votes

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),
2
votes

As Traxo commented you need to include the Google material icons font. There are two solutions:

  1. Add the css link <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> to your <head>,

  2. 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

2
votes

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

2
votes

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