时间戳

首页 > 解决方案 > 不显示材质图标 - Quasar

html - 不显示材质图标 - Quasar

问题描述

我有一个类星体项目，其中材料图标显示为文本而不是图标。我确实使用 npm 安装了这些软件包。即使，它不工作。

下面是我的 app.js 文件

require('./bootstrap');

window.Vue = require('vue');

require('quasar/dist/quasar.css');
require('quasar/dist/quasar.min.css');

import Quasar from 'quasar';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from 'vuetify';
import Vue from 'vue';

import Plugin from '@quasar/quasar-ui-qiconpicker';
import '@quasar/quasar-ui-qiconpicker/dist/index.css';
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/eva-icons.umd.js';
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/fontawesome-v5.umd.js';
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/ionicons-v4.umd.js';
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-outlined.umd.js';
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-round.umd.js';
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-sharp.umd.js';
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons.umd.js';
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/mdi-v4.umd.js';
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/themify.umd.js';

Vue.use(Plugin)

Vue.use(Quasar);
Vue.use(Vuetify);


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('example-component1', require('./components/Com.vue').default);
Vue.component('example-component2', require('./components/Comp.vue').default);


let app = new Vue({
        el: '#app',
        icons: {
        iconfont: 'mdi', // default - only for display purposes
        },
        });

标签： htmlvue.jsquasar-frameworkquasargoogle-material-icons

解决方案

在您的 quasar.conf.js 中，您必须指定要使用的图标集——您在该文件中列出了几个选项。然后，确保在指定图标名称时，它们与材料设计网站上的图标名称相匹配。我还看到，当您只需要 Material 时，您正在导入所有图标集——这可能会浪费内存。

推荐阅读