material-design - 如何在nuxt中使用 Material 设计图标

Question

从一小时前开始，我在 Material 设计图标 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

我想通了，

第 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>

Here是 Material Icons 的完整列表。