Search code examples
vue.jsvue-cliquasar-framework

How can I use an icon with q-btn (vuejs, quasar as a plugin)


I've been trying to make this work:

<q-btn flat round icon="logo-linkedin" />

But it does not work at all!

Here's how it looks on ionicons: <ion-icon name="logo-linkedin"></ion-icon>

Despite having all possible imports in quasar-user-options.js file:

import "./styles/quasar.scss";
import "@quasar/extras/roboto-font/roboto-font.css";
import "@quasar/extras/material-icons/material-icons.css";
import "@quasar/extras/material-icons-outlined/material-icons-outlined.css";
import "@quasar/extras/material-icons-round/material-icons-round.css";
import "@quasar/extras/material-icons-sharp/material-icons-sharp.css";
import "@quasar/extras/fontawesome-v5/fontawesome-v5.css";
import "@quasar/extras/ionicons-v4/ionicons-v4.css";
import "@quasar/extras/mdi-v4/mdi-v4.css";
import "@quasar/extras/eva-icons/eva-icons.css";

import { Notify } from "quasar";

export default {
  config: {},
  plugins: { Notify },
};

What am I missing?


Solution

  • Okay, thanks to the guys on Discord and Github discussions, this works now:

    import "./styles/quasar.scss";
    import iconSet from "quasar/icon-set/ionicons-v4";
    import "@quasar/extras/ionicons-v4/ionicons-v4.css";
    
    import { Notify } from "quasar";
    
    export default {
      config: {
        iconSet,
      },
      plugins: { Notify },
    };
    
    

    then:

    <q-btn flat round icon="ion-logo-linkedin" />