3

I install icons css using npm install material-design-icons-iconfont and it is available in node modules. After i build, the below woff files available in dist

Material-design-icons.css

  /* For IE6-8 */
      src: local("Material Icons"), local("MaterialIcons-Regular"), 
      url("./fonts/MaterialIcons-Regular.woff2") format("woff2"), 
      url("./fonts/MaterialIcons-Regular.woff") format("woff"), 
      url("./fonts/MaterialIcons-Regular.ttf") format("truetype");

all the three woff files shows 404. I verified in dist folder, i can see all those files in static/fonts/.woff. In browser console also `localhost:8000/static/fonts/.woff. All the file names and paths are correct, but still see 404 error in console.

Sam
  • 2,275
  • 9
  • 30
  • 53

3 Answers3

7

Afetr NPM installation, why not follow the Vuetify documentation by importing it in your main.js or app.js file. 

// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css'
// Ensure you are using css-loader

Vue.use(Vuetify, {
  iconfont: 'md'
})

But the easiest way is just to include the CDN link:

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
DAVID AJAYI
  • 1,912
  • 20
  • 13
1

There are multiple material icon packages flying around. There are also multiple formats, SVGs and what not. It is easy to get confused. Assuming you have a standard vuetify configuration and your goal is to have a locally installed font because you don't like injecting foreign substance to your head, then following should work:

Eliminate the external library

First edit your public/index.html and comment out the @mdi import. This line also gives us a clue to which package vuetify is expecting.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

Install your local dependency

Then in your project folder, install the @mdi / font package.

yarn add @mdi/font

Import into Vue

Then, finally we need to get this newly download package into our application. You can import anywhere, but it's good practice to keep vuetify related things in the vuetify configuration file which is located at plugins/vuetify.js

import "@mdi/font/css/materialdesignicons.min.css";

Let Vuetify know all about it

and make sure to export material design as the preferred icon font for your vuetify project.

Inside plugins/vuetify.js

export default new Vuetify({
    icons: {
        iconFont: "md",
    },
});

You might want need to rebuild your project. Have a great day.

P.S @ points to your node_modules folder.

anakha
  • 980
  • 6
  • 9
0

Have you checked you have css-loader in you webpack config?

module: {
    loaders: [
     { test: /\.css$/, loader: "css-loader" }
  ]
}
uiguru
  • 1
  • 1