如何在nuxt中使用Material Design图标

Question

一个小时前开始，我在Material Design Icons 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时，它只是冻结了...

- Deep Seeker

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>

这里 是 Material Icons 的完整列表。

- Rohit Nishad

Answer 2

对于Nuxt.js，您需要安装此软件包：

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',
],

- Billal Begueradj

---

此软件包不支持nuxt3。 - Dr Deo

有一长串不兼容 Nuxt3 的模块列表：https://github.com/nuxt/framework/discussions/751 - Billal Begueradj

Answer 3

在 nuxt.config.js 的 "modules" 中添加 "nuxt-material-design-icons"。

- Vitor Daniel

Answer 4

Nuxt 3 用户更新提示：

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        // Include Google Fonts Material Icons CDN
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' },
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0' },
        // ...other link tags
      ],
    },
  },
})

- Rudolf Jacobs