blocks|key|790432|text|在Vue+CLI+3中，我们在src文件夹中没有index.html，所以您可以这样做|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|790433|npm+install+--save+material-design-icons-iconfont|code-block|syntax|javascript|790434|并将其导入main.js文件中。|790435|import+'material-design-icons-iconfont/dist/material-design-icons.css'|790436|entityMap^0|F|3|0|0|5|7|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

With Vue CLI 3 we have no index.html in the src folder so alternatively you can

<pre><code>npm install --save material-design-icons-iconfont
</code></pre>

and import it in the main.js file

<pre><code>import 'material-design-icons-iconfont/dist/material-design-icons.css'
</code></pre>

blocks|key|790493|text|Vuetify+2.1.3中有此问题，通过vuetify加载器1.2.2安装。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|790494|似乎以前的解决方案不起作用，因为默认图标库已更改为mdi-字体。|790495|解决办法是：|790496|yarn+add+@mdi/font|code-block|syntax|javascript|790497|在文件main.js+(如果存在plugins/vueitfy.js+)中，将该行添加到导入下面|offset|length|style|CODE|790498|import+'@mdi/font/css/materialdesignicons.css'|790499|entityMap^0|0|0|0|0|3|7|G|I|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$M|Z|N|10|O|P]|$M|11|N|12|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

Had this issue with Vuetify 2.1.3 installed via the vuetify-loader 1.2.2 

Seems like previous solutions do not work becues the default icons library has changed to mdi-font. 

Solution was:

<pre><code>yarn add @mdi/font
</code></pre>

And in the file <code>main.js</code> (or <code>plugins/vueitfy.js</code> if exists) add this line below the imports

<pre><code>import '@mdi/font/css/materialdesignicons.css'
</code></pre>

blocks|key|1602144|text|为我工作过：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1602145|npm+install+@mdi/font|code-block|syntax|javascript|1602146|然后将其放入plugins/vuatefy.js中：|1602147|import+'@mdi/font/css/materialdesignicons.css'|1602148|使用"vuetify"："%5E2.3.19"，"vue"："%5E2.6.12"，|1602149|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Worked for me:
<pre><code>npm install @mdi/font
</code></pre>
and then putting this inside plugins/vuetify.js:
<pre><code>import '@mdi/font/css/materialdesignicons.css'
</code></pre>
Using &quot;vuetify&quot;: &quot;^2.3.19&quot;, &quot;vue&quot;: &quot;^2.6.12&quot;,

blocks|key|1602023|text|如果使用Nuxt.js，您可能会面临完全相同的问题。为了解决这个问题，你必须在你的CSS中声明材料设计图标.例如，通过CDN，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1602024|link:+[
++{+rel:+'icon',+type:+'image/x-icon',+href:+'/favicon.ico'+},
++++{
++++++rel:+'stylesheet',
++++++href:
++++++++++'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CMaterial%2BIcons'
++++}
]|code-block|syntax|javascript|1602025|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can face the exact same issue if you use Nuxt.js. To solve this issue, you have to declare the Material Design icons in your CSS ... through the CDN, for example, as below:

<pre><code>link: [
 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
 {
 rel: 'stylesheet',
 href:
 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
 }
]
</code></pre>

blocks|key|2234122|text|如果您使用的是Nuxt以及Vuetify和Material，那么Firefox中不会显示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2234123|npm+install+import+@mdi/font|code-block|syntax|javascript|2234124|然后在nuxt.config.js中向css字段添加以下条目：|offset|length|style|CODE|2234125|css:+["@mdi/font/css/materialdesignicons.css"]|2234126|entityMap^0|0|0|3|E|J|3|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

If you are using Nuxt with Vuetify and Material Icons don't show up in Firefox:

<pre><code>npm install import @mdi/font
</code></pre>

Then in your <code>nuxt.config.js</code> add the following entry to your <code>css</code> field:

<pre><code>css: ["@mdi/font/css/materialdesignicons.css"]
</code></pre>

blocks|key|1602203|text|npm+install+@mdi/font|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1602204|用main.js(或plugins/vuatefy.js)编写|unstyled|1602205|import+"@mdi/font/css/materialdesignicons.css";|1602206|我从这里也得到了这个答案，它成功地起了作用))|1602207|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>npm install @mdi/font
</code></pre>
write in main.js(or plugins/vuetify.js)
<pre><code>import &quot;@mdi/font/css/materialdesignicons.css&quot;;
</code></pre>
I got this answer from here too and it work succesfully )))

blocks|key|1602068|text|阅读最新发布的文档，并在index.html中包含以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1602069|<link+href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"+rel="stylesheet">|code-block|syntax|javascript|1602070|参考文献|offset|length|1602071|entityMap|0|LINK|mutability|MUTABLE|url|https://vuetifyjs.com/en/customization/icons^0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Read the latest released docs and include below code in your index.html

<pre><code>&lt;link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"&gt;
</code></pre>

<a href="https://vuetifyjs.com/en/customization/icons" rel="nofollow noreferrer">Reference</a>

blocks|key|1602187|text|还可以检查vuetify+config文件plugins/vuetify.js。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1602188|附加桅杆设置iconfont:+'mdi'。在同样的情况下，默认情况是iconfont:'fas'|1602189|我花了很多时间才找到它)|1602190|​|1602191|import+Vue+from+'vue';
import+Vuetify+from+'vuetify';

Vue.use(Vuetify);

const+opts+=+{
++theme:+{
++++themes:+{
++++++light:+{
++++++++//
++++++},
++++},
++},
++icons:+{
++++iconfont:+'mdi',
++},
};

export+default+new+Vuetify(opts);|code-block|syntax|javascript|1602192|1602193|entityMap^0|5|7|D|6|L|I|0|6|F|Z|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|11|8|@$9|12|A|13|B|D]|$9|14|A|15|B|D]]|E|@]|F|$]]|$1|I|3|J|5|6|7|16|8|@]|E|@]|F|$]]|$1|K|3|L|5|6|7|17|8|@]|E|@]|F|$]]|$1|M|3|N|5|O|7|18|8|@]|E|@]|F|$P|Q]]|$1|R|3|L|5|6|7|19|8|@]|E|@]|F|$]]|$1|S|3|-4|5|6|7|1A|8|@]|E|@]|F|$]]]|T|$]]

Also check your vuetify config file <code>plugins/vuetify.js</code>
Additional mast be setting <code>iconfont: 'mdi'</code> . In same cases default is <code>iconfont:'fas'</code>
I spent many hours to find it)
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

const opts = {
 theme: {
 themes: {
 light: {
 //
 },
 },
 },
 icons: {
 iconfont: 'mdi',
 },
};

export default new Vuetify(opts);</code></pre>
</div>
</div>

blocks|key|790569|text|您可以导入所有必要的样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|790570|app.scss|offset|length|style|CODE|790571|@import+"https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900";
@import+"https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css";
@import+"https://fonts.googleapis.com/css?family=Material%2BIcons";
@import+'~vuetify/dist/vuetify.css';|code-block|syntax|javascript|790572|entityMap^0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You can import all necessary styles 

<code>app.scss</code>

<pre><code>@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900";
@import "https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css";
@import "https://fonts.googleapis.com/css?family=Material+Icons";
@import '~vuetify/dist/vuetify.css';
</code></pre>

blocks|key|790603|text|来自@Hasnat的解决方案适合我，但在main.js中订购是很重要的：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|790604|import+'material-design-icons-iconfont/dist/material-design-icons.css';
import+vuetify+from+'./plugins/vuetify';|code-block|syntax|javascript|790605|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/57535771/3632441^0|A|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

A <a href="https://stackoverflow.com/a/57535771/3632441">solution</a> from @Hasnat Safder works for me, but an order in main.js is important:

<pre><code>import 'material-design-icons-iconfont/dist/material-design-icons.css';
import vuetify from './plugins/vuetify';
</code></pre>

blocks|key|2234225|text|$+yarn+add+@mdi/font+-D|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2234226|//或$+npm安装@mdi/+-D字体|unstyled|2234227|//+src/plugins/vuetify.js



import+'@mdi/font/css/materialdesignicons.css'+//+Ensure+you+are+using+css-loader
import+Vue+from+'vue'
import+Vuetify+from+'vuetify/lib'

Vue.use(Vuetify)

export+default+new+Vuetify({
++icons:+{
++++iconfont:+'mdi',+//+default+-+only+for+display+purposes
++},
})|2234228|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$ yarn add @mdi/font -D
</code></pre>
// OR
$ npm install @mdi/font -D
<pre><code>// src/plugins/vuetify.js



import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
 icons: {
 iconfont: 'mdi', // default - only for display purposes
 },
})
</code></pre>

blocks|key|2234186|text|纱线方式(类似于Hasnat的答复)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2234187|yarn+add+material-design-icons-iconfont|code-block|syntax|javascript|2234188|并导入vuetify.js文件(如果不存在则导入main.js+)，如下所示：|2234189|import+'material-design-icons-iconfont/dist/material-design-icons.css';|2234190|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The yarn way (similar to Hasnat's response):

<pre><code>yarn add material-design-icons-iconfont
</code></pre>

and import in the vuetify.js file (or main.js if it doesn't exist) like so:

<pre><code>import 'material-design-icons-iconfont/dist/material-design-icons.css';
</code></pre>

blocks|key|2234309|text|，这就是我的工作方式，|type|blockquote|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2234310|安装|unstyled|2234311|yarn+add+@mdi/font+-D|code-block|syntax|javascript|2234312|//或|2234313|npm+install+@mdi/font+-D|2234314|然后将这些添加到main.js或vuetify.js中。|2234315|import+'@mdi/font/css/materialdesignicons.css'+//+Ensure+you+are+using+css-loader
import+{+createVuetify+}+from+'vuetify'

export+default+createVuetify({
++icons:+{
++++defaultSet:+'mdi',+//+This+is+already+the+default+value+-+only+for+display+purposes
++},
})|2234316|entityMap^0|0|B|0|0|2|0|0|0|0|2|O|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|I|3|J|5|K|7|13|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|H|7|14|8|@]|D|@]|E|$]]|$1|P|3|Q|5|K|7|15|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|H|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|T|3|U|5|K|7|19|8|@]|D|@]|E|$L|M]]|$1|V|3|-4|5|H|7|1A|8|@]|D|@]|E|$]]]|W|$]]

<blockquote>
This is how it worked for me
</blockquote>
install
<pre><code>yarn add @mdi/font -D
</code></pre>
// OR
<pre><code>npm install @mdi/font -D
</code></pre>
Then add these to main.js or vuetify.js
<pre><code>import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import { createVuetify } from 'vuetify'

export default createVuetify({
 icons: {
 defaultSet: 'mdi', // This is already the default value - only for display purposes
 },
})
</code></pre>

I am using <code>vue.js</code> and <code>vuetify</code>. I want to add an icon but it is not working as expected (not rendered).
How can I fix this?
Please refer to the following code:
main.js
<pre><code>import Vue from 'vue'
import Vuetify from &quot;vuetify&quot;;
import &quot;vuetify/dist/vuetify.min.css&quot;;

Vue.use(Vuetify);
</code></pre>
index.html
<pre><code>&lt;link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel=&quot;stylesheet&quot;&gt;
</code></pre>
calendar.vue
<pre><code>&lt;i class=&quot;material-icons&quot;&gt;
keyboard_arrow_down
&lt;/i&gt;
</code></pre>
I want it to look like an icon, not code. 
<blockquote>
<img src="https://i.stack.imgur.com/o3v8Y.png" alt="enter image description here" />
</blockquote>

vuetify icon not showing

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我正在使用vue.js和vuetify。我想添加一个图标，但它不像预期的那样工作(没有呈现)。我怎么才能解决这个问题？请参阅下列代码：main.jsimport Vue from 'vue'import Vuetify from "vuetify";import "vuetify/dist/vuetify.min.css";Vue.use(Vuetify);index.html<link href

问不显示vuetify图标
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不显示vuetify图标EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不显示vuetify图标
EN