如何在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>

以下是材质图标的完整列表。

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

Answer 3

添加"nuxt材料设计图标"；在"；模块"；在nuxt.config.js 中

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
],
},
},
})