如何在nuxt中使用材质设计图标

Question

从几个小时前开始，我在材料设计图标cdn上不断收到网络错误，因为错误名称未被解析。

http://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css

我想知道为什么nuxt app使用cdn而不是下载的文件？

当我尝试运行npm install nuxt-material-design-icons或npm install material-design-icons时，它就会冻结。

Answer 1

我想通了，

第一步：添加谷歌字体图标的CDN。

export default {
  head () {
    return {
      link: [
        // Add this
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
      ],
    }
  }
}

第2步:使用它(您已经完成了！)

<template>
  // Add this
  <span class="material-icons">face</span>
</template>

提示： Here是材料图标的完整列表。

Answer 2

对于Nuxt.js，您需要安装this package:

yarn add nuxt-material-design-icons-iconfont
// Or if you are using npm:
npm install nuxt-material-design-icons-iconfont

并在nuxt.config.js文件中声明该包：

modules: [
  'nuxt-material-design-icons-iconfont',
],

Answer 3

在nuxt.config.js的“模块”中添加"nuxt-material-design-icons“