无法在Vuetify中使用Material Design图标

Question

我使用npm install material-design-icons-iconfont安装图标css，它可以在node模块中找到。构建后，以下woff文件可在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");

所有三个woff文件都显示404错误。我在dist文件夹中进行了验证，可以在static / fonts / 中看到所有这些文件。在浏览器控制台中也有 `localhost：8000 / static / fonts / 。所有文件名和路径都正确，但控制台仍然显示404错误。

- Sam

---

显然这是一个引用问题 - 你尝试过省略 './' 吗，像这样：url("fonts/MaterialIcons-Regular.woff2") format("woff2")？ - iLuvLogix

是的，我也试过那个方法，但还是不起作用。 - Sam

Answer 1

在安装完NPM之后，为何不遵循Vuetify文档的要求，在您的main.js或app.js文件中引入它呢？

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

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

但最简单的方法就是直接包含CDN链接：

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

- DAVID AJAYI

---

不要使用import作为CDN链接。这会导致渲染阻塞资源的问题。 - tadvas

Answer 2

有多个与材料相关的图标包在流传。此外，还有多种格式，如SVG等。很容易混淆。假设您拥有一个标准的vuetify配置，并且您的目标是拥有一个本地安装的字体，因为您不喜欢向您的head注入外来物质，则以下内容应该有效：

消除外部库

首先，编辑您的public/index.html并注释掉@mdi导入。这一行也给了我们一个线索，表明vuetify期望哪个包。

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

安装本地依赖

然后在您的项目文件夹中，安装@mdi / font包。

yarn add @mdi/font

导入到Vue

最后，我们需要将这个新下载的包引入到我们的应用程序中。您可以在任何地方导入，但最好的做法是将与vuetify相关的内容保存在位于plugins/vuetify.js的vuetify配置文件中。

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

Vuetify要全面了解它

并确保将material design导出为您的vuetify项目的首选图标字体。

在plugins/vuetify.js内部

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

你可能需要重建你的项目。祝你有美好的一天。

P.S. @ 指向你的 node_modules 文件夹。

- anakha

Answer 3

你检查过你的 webpack 配置中是否有 css-loader 吗？

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

- uiguru