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

Question

从大约一个小时前开始，我不断在材料设计图标 CDN 上收到网络错误，因为错误名称未解决。

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

我想知道为什么 nuxt 应用程序使用 cdn 而不是下载文件？

当我尝试运行npm install nuxt-material-design-icons或npm install material-design-icons它只是冻结..

Answer 1

我想到了，

第1步：添加Google字体图标的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>

这是材质图标的完整列表。