Using Material Icons in v1 Beta 23

Patrick Spiegel

Hello, it seems like you kiled the @quasar/extras package and moved its content into the main repository.

However, when I follow the instructions on how to use the new icon-sets I get the icon names instead of the icons in my application.
https://v1.quasar-framework.org/options/quasar-icon-sets#Introduction

This is how I have initialized the icons.

Vue.use(Quasar, {
  iconSet: require("quasar/icon-set/material-icons").default
});

Pretty simple, but I don’t know what else to do. No error messages.

I am using TypeScript + Vue-CLI v3

rstoenescu

Hi,

@quasar/extras never existed before v1.0. It existed as quasar-extras package which is now deprecated.
Moving its repo to main Quasar repo does not influence the package name.
Are you trying to install a Quasar Icon Set or an Icon Library? There’s a huge difference.

Installing Icon Libraries: https://v1.quasar-framework.org/options/installing-icon-libraries
Specifying Quasar Icon Set: https://v1.quasar-framework.org/options/quasar-icon-sets

Patrick Spiegel

Well this entry has been added by the vue quasar plugin.

"dependencies": {
    "@quasar/extras": "^1.0.0",

I used to import material icons and roboto font this way:

import "@quasar/extras/roboto-font/roboto-font.css";
import "@quasar/extras/material-icons/material-icons.css";

Maybe that helps with the confusion.

Hawkeye64

@Patrick-Spiegel In your quasar.conf.js all you need to do is like this:

    extras: [
      'roboto-font',
      'material-icons', // optional, you are not bound to it
      // 'ionicons-v4',
      // 'mdi-v3',
      'fontawesome-v5'
      // 'eva-icons'
    ],

Patrick Spiegel

@Hawkeye64 yes, that works when you are using the Quasar CLI. But for TypeScript the Vue CLI works just better out of the box.

Hawkeye64

@Patrick-Spiegel
I find I get a way better user experience for a Quasar project to use the Quasar CLI. It wouldn’t even cross my mind to deprecate to the Vue CLI.

labs20

Sorry, I’m must be doing something stupid, but cant figure it out.

I cant change to use any of the other icons libraries, I’m keep getting the names on the browser instead of the actual icons.

Its a fresh V1 created project and all I did was went to quasar.conf and comment ‘material-icons’ and uncommented ‘mdi-v3’.

    extras: [
      'roboto-font',
      // 'material-icons' // optional, you are not bound to it
      //'ionicons-v4',
      'mdi-v3',
      // 'fontawesome-v5',
      //'eva-icons'
    ],

Help?

labs20

Annnnnnnd… the Special Stupid Award goes to me.

I was not placing the prefix on icon name.

q-icon(name="menu")           // Kids, don't do this
q-icon(name="mdi-menu")   // Much better

Thanks and please ignore me while I’m burning in shame…

MAHTA

I LOVE quasar-framework

Hawkeye64

@labs20 Glad you figured it out.

No More Posting New Topics!

Using Material Icons in v1 Beta 23