Solution 1 :

Within your quasar.conf.js, you must specify which icon set you’d like to use — you have several options outlined within that file. Then, make sure when you’re specifying the icon names, they match what the icon name is on the material design web site. I also see that you’re importing ALL of the icon sets when you only need Material — which may be a waste of memory.

Solution 2 :

Have you added material icons font to the document?

Problem :

I have a quasar project in which the material icons are being displayed as text instead of icons.
I did install the packages using npm. Even though, it is not working.

Below is my app.js file


window.Vue = require('vue');


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';



 * 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


Comment posted by Abhishek

I have added this to my head.blade file

Comment posted by

You can also check that page:

Comment posted by Max

You are asking about material icons, but added to head fontawesome icons

Comment posted by Abhishek

Shoot! Thanks for that.