Quasar Icons: Search Material Icons, MDI and More

Quasar icons come from nine icon libraries, and each one wants its names written a different way: home, sym_o_home, mdi-home, fa-solid fa-house, bi-house. Get the prefix wrong and you see a blank space, or the word "home" printed as text. This post explains how Quasar maps an icon name to a library, what extras and iconSet each do, and when SVG icons are the better pick. It also introduces Quasar Icon Search, a free tool that searches every set at once and gives you the exact name to paste.

Quasar Icon Search: one search, every icon set

Quasar Icon Search is a free page on quasarui.com. It runs in the browser, with no sign-in. You type a word like "home" or "invoice" and it searches all 15 icon sets in @quasar/extras at once: each set gets a tab with its number of matches, so you see straight away that MDI has dozens of home icons and Themify has one. Common synonyms count too, so "home" also finds bi-house in Bootstrap Icons and "settings" finds mdi-cog.

Click an icon and the panel beside the grid shows its exact name for that set (mdi-home, sym_o_home, fa-solid fa-house), the <q-icon> tag, and the extras and iconSet lines for quasar.config or nuxt.config.ts. Switch to SVG and you get the import instead (import { mdiHome } from '@quasar/extras/mdi-v7') with the matching svg- icon set.

It exists because the lookup is the slow part. You know you want a gear icon, you know your app loads MDI, and you still end up on a third-party site guessing whether the name is mdi-cog, mdi-settings or mdi-gear. The tool answers that question in one place and gives you the config line along with the name.

The rest of this post is the background: what those prefixes mean, so the names make sense even without the tool.

How Quasar icons map names to icon sets

q-icon reads its name and picks the library from the start of the string. There is no registry: the prefix is the whole contract. The same rule applies to every icon prop on other components (q-btn icon="...", q-input clear-icon="...").

Ligature sets: Material Icons and Material Symbols

Google's sets are ligature fonts: the icon name is real text, and the font draws it as a glyph. That's why the names use underscores (account_circle) and why a missing font shows the word itself instead of an icon. A name with no recognized prefix falls through to Material Icons, so a name from a set you forgot to load, like bi-home without Bootstrap Icons, renders blank or as stray text instead of an icon.

The o_, r_ and s_ prefixes pick the outlined, round and sharp Material Icons fonts. sym_o_, sym_r_ and sym_s_ pick the three Material Symbols fonts. Each style is a separate font file, so each one you use has to be loaded.

Class-based sets: MDI, Font Awesome and the rest

Everything else is class-based: the name becomes CSS classes on the <i> tag, and the font's own ::before rule draws the glyph. Quasar adds the library's base class for you, so mdi-home becomes mdi mdi-home.

Font Awesome and Line Awesome names are the classes from their own docs, style included. For Font Awesome v7 that is fa-solid fa-house, fa-regular fa-bell or fa-brands fa-github. The shorter fas fa-house still works, but Quasar's docs mark fas, far and fab as deprecated. Some Font Awesome names changed between major versions (fa-house is the current name, fa-home an alias), which is a common reason a name copied from an old answer doesn't match the docs.

Ionicons is the odd one: the only Ionicons webfont in @quasar/extras is v4, because Ionicons stopped shipping a webfont after that. A bare ion-home gets the current platform's prefix: ion-ios-home on iOS, ion-md-home elsewhere. For Ionicons v8 you use SVG imports instead (below).

extras vs iconSet: two different settings

Two config keys sound alike and do different jobs:

• extras loads icon fonts so your templates can use them. List every set you write names from.
• iconSet picks the icons Quasar's own components draw: the QSelect dropdown arrow, the QTable pagination chevrons, the QChip remove button. You can load several fonts but only one iconSet.

In a Quasar CLI app, both live in quasar.config:

// quasar.config.js
export default defineConfig(() => ({
  extras: ['mdi-v7', 'material-symbols-outlined'],
  framework: {
    iconSet: 'material-symbols-outlined',
  },
}))

With nuxt-quasar-ui, the font list is extras.fontIcons. If iconSet names a webfont set, the module adds that font for you (its autoIncludeIconSet option is on by default):

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-quasar-ui'],
  quasar: {
    iconSet: 'material-symbols-outlined',
    extras: {
      fontIcons: ['mdi-v7'],
    },
  },
})

With the Quasar Vite plugin instead of Quasar CLI, you import the font's CSS from @quasar/extras and pass the set to app.use(Quasar, { iconSet }). The Quasar icon set docs show both lines.

Webfont or SVG icons?

Every set in @quasar/extras also ships as SVG exports, and q-icon accepts the SVG path string directly:

<script setup lang="ts">
import { mdiHome } from '@quasar/extras/mdi-v7'
import { fasHouse } from '@quasar/extras/fontawesome-v7'
import { symOutlinedHome } from '@quasar/extras/material-symbols-outlined'
</script>

<template>
  <q-icon :name="mdiHome" size="md" />
  <q-btn flat round :icon="fasHouse" aria-label="Home" />
  <q-icon :name="symOutlinedHome" color="primary" />
</template>

The names are camelCase with a set prefix: mat, outlined, round, sharp, symOutlined, symRounded, symSharp, mdi, fas/far/fab, bi, eva, ti, la, ionMd/ionIos for Ionicons v4 and ion for v8. Note the :name binding: the value is a variable holding path data, not a string literal.

Pick SVG when you use a few dozen icons and care about bundle size. Only the icons you import end up in the build, and there's no font file to download before icons appear. Use an svg- icon set (iconSet: 'svg-mdi-v7') and you can drop the webfont completely.

Pick a webfont when icon names come from data (a database row, a CMS field, a user's choice), because you can't import an icon whose name you only know at runtime. Material Symbols webfonts also support variable font axes like fill and weight, which SVG exports can't change.

How many icons each set has

The SVG exports in @quasar/extras 2.1.0 list these counts:

MDI is the largest set by far. Material Symbols has nearly twice as many names as the older Material Icons set: 2,072 of its names have no Material Icons version, such as network_intelligence.

Why a Quasar icon isn't showing

Most missing icons come down to one of these:

• The font isn't loaded. A name like mdi-home needs mdi-v7 in extras (or extras.fontIcons in Nuxt). Blank space where the icon should be is the usual sign.
• The text shows instead of the icon. The name didn't match any prefix, so Quasar treated it as a Material Icons ligature. Check for underscores where dashes belong, or the reverse.
• A Material Symbols name in Material Icons. Newer names exist only in Material Symbols. Add the sym_o_ prefix and load the font.
• The name is from another version. MDI and Font Awesome rename icons between majors. Check the name against the version @quasar/extras ships.

Common questions about Quasar icons

What is the default Quasar icon set? Material Icons. Unless you set iconSet, Quasar's components use it, so either load the material-icons font or point iconSet at a set you do load.

Can I mix icon sets in one app? Yes. Load each font you use in extras. Only iconSet, the one Quasar's components draw from, is limited to one.

Can I use my own SVG files as icons? Yes: img:/icons/logo.svg for a file in public/, or svguse:icons.svg#logo for a sprite. For a whole custom library, $q.iconMapFn maps your own prefix to classes.

Are icons read by screen readers? No. Since Quasar 2.25, every q-icon is aria-hidden by default. Put the aria-label on the button or link that holds the icon.

Next step

Open Quasar Icon Search, type the thing you need an icon for, and copy the name for the set your app already loads, along with the config line if the set is new to your project.