CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-quasar--extras

Comprehensive collection of web fonts, icons, and animations for the Quasar Framework

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

material-icons.mddocs/

Material Icons

Google's official Material Design icons providing 2100+ icons in multiple style variants. Each icon is available as both SVG exports for programmatic use and webfonts for CSS styling.

Capabilities

Material Icons (Standard)

Standard filled Material Design icons.

/**
 * SVG string constants for Material Icons
 * Each constant contains the SVG path data for the icon
 */
export declare const mat10k: string;
export declare const mat10mp: string;
export declare const mat11mp: string;
export declare const mat123: string;
export declare const matAdd: string;
export declare const matAddAPhoto: string;
export declare const matAddAlarm: string;
export declare const matAddAlert: string;
export declare const matAddBox: string;
export declare const matAddCircle: string;
export declare const matAddCircleOutline: string;
export declare const matAddComment: string;
export declare const matAddHome: string;
export declare const matAddLocationAlt: string;
export declare const matAddShoppingCart: string;
export declare const matAddTask: string;
export declare const matHome: string;
export declare const matSettings: string;
export declare const matMenu: string;
export declare const matClose: string;
export declare const matArrowBack: string;
export declare const matArrowForward: string;
export declare const matSearch: string;
export declare const matMoreVert: string;
export declare const matMoreHoriz: string;
export declare const matFavorite: string;
export declare const matFavoriteBorder: string;
export declare const matShare: string;
export declare const matDelete: string;
export declare const matEdit: string;
export declare const matCheck: string;
export declare const matCheckCircle: string;
export declare const matError: string;
export declare const matWarning: string;
export declare const matInfo: string;
export declare const matVisibility: string;
export declare const matVisibilityOff: string;
export declare const matDownload: string;
export declare const matUpload: string;
export declare const matSave: string;
export declare const matPrint: string;
export declare const matEmail: string;
export declare const matPhone: string;
export declare const matMessage: string;
export declare const matNotifications: string;
export declare const matAccount: string;
export declare const matAccountCircle: string;
export declare const matLock: string;
export declare const matLockOpen: string;
export declare const matCalendarToday: string;
export declare const matSchedule: string;
export declare const matWork: string;
export declare const matBusiness: string;
export declare const matShoppingCart: string;
export declare const matPayment: string;
// ... and 2000+ more icons

Usage Examples:

import { 
  matHome, 
  matSettings, 
  matAdd, 
  matDelete, 
  matEdit 
} from "@quasar/extras/material-icons";

// Use with Quasar QIcon component
<template>
  <q-icon :name="homeIcon" size="24px" />
  <q-btn :icon="addIcon" @click="addItem" />
  <q-btn :icon="editIcon" flat round @click="editItem" />
</template>

<script>
export default {
  data() {
    return {
      homeIcon: matHome,
      addIcon: matAdd,
      editIcon: matEdit,
      deleteIcon: matDelete,
      settingsIcon: matSettings
    };
  }
}
</script>

Material Icons Outlined

Outlined style variant of Material Icons.

/**
 * Material Icons Outlined - outlined style variants
 * Prefix: o_ for webfont usage
 */
export declare const matAddOutlined: string;
export declare const matHomeOutlined: string;
export declare const matSettingsOutlined: string;
export declare const matDeleteOutlined: string;
export declare const matEditOutlined: string;
export declare const matFavoriteOutlined: string;
export declare const matSearchOutlined: string;
export declare const matMenuOutlined: string;
export declare const matCloseOutlined: string;
export declare const matCheckOutlined: string;
export declare const matInfoOutlined: string;
export declare const matWarningOutlined: string;
export declare const matErrorOutlined: string;
export declare const matVisibilityOutlined: string;
export declare const matAccountCircleOutlined: string;
export declare const matNotificationsOutlined: string;
export declare const matCalendarTodayOutlined: string;
export declare const matWorkOutlined: string;
export declare const matShoppingCartOutlined: string;
// ... more outlined variants

Material Icons Round

Rounded style variant of Material Icons.

/**
 * Material Icons Round - rounded style variants  
 * Prefix: r_ for webfont usage
 */
export declare const matAddRound: string;
export declare const matHomeRound: string;
export declare const matSettingsRound: string;
export declare const matDeleteRound: string;
export declare const matEditRound: string;
export declare const matFavoriteRound: string;
export declare const matSearchRound: string;
export declare const matMenuRound: string;
export declare const matCloseRound: string;
export declare const matCheckRound: string;
export declare const matInfoRound: string;
export declare const matWarningRound: string;
export declare const matErrorRound: string;
export declare const matVisibilityRound: string;
export declare const matAccountCircleRound: string;
export declare const matNotificationsRound: string;
export declare const matCalendarTodayRound: string;
export declare const matWorkRound: string;
export declare const matShoppingCartRound: string;
// ... more rounded variants

Material Icons Sharp

Sharp style variant of Material Icons.

/**
 * Material Icons Sharp - sharp/angular style variants
 * Prefix: s_ for webfont usage  
 */
export declare const matAddSharp: string;
export declare const matHomeSharp: string;
export declare const matSettingsSharp: string;
export declare const matDeleteSharp: string;
export declare const matEditSharp: string;
export declare const matFavoriteSharp: string;
export declare const matSearchSharp: string;
export declare const matMenuSharp: string;
export declare const matCloseSharp: string;
export declare const matCheckSharp: string;
export declare const matInfoSharp: string;
export declare const matWarningSharp: string;
export declare const matErrorSharp: string;
export declare const matVisibilitySharp: string;
export declare const matAccountCircleSharp: string;
export declare const matNotificationsSharp: string;
export declare const matCalendarTodaySharp: string;
export declare const matWorkSharp: string;
export declare const matShoppingCartSharp: string;
// ... more sharp variants

Webfont Usage

CSS Import

/* Import Material Icons 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';

HTML Usage

<!-- Standard Material Icons -->
<i class="material-icons">home</i>
<i class="material-icons">settings</i>
<i class="material-icons">add</i>

<!-- Outlined variants -->
<i class="material-icons-outlined">o_home</i>
<i class="material-icons-outlined">o_settings</i>

<!-- Round variants -->  
<i class="material-icons-round">r_home</i>
<i class="material-icons-round">r_settings</i>

<!-- Sharp variants -->
<i class="material-icons-sharp">s_home</i>
<i class="material-icons-sharp">s_settings</i>

QIcon Usage

<!-- With Quasar QIcon component -->
<q-icon name="home" />
<q-icon name="o_settings" />
<q-icon name="r_favorite" />
<q-icon name="s_delete" />

Icon Naming Convention

SVG Export Names

  • Prefix: mat (e.g., matHome, matSettings)
  • CamelCase after prefix
  • Numbers at start become words (e.g., mat3dRotation for "3d_rotation")

Webfont Class Names

  • Standard: Direct icon name with underscores (e.g., home, settings, add_circle)
  • Outlined: Prefix o_ (e.g., o_home, o_settings)
  • Round: Prefix r_ (e.g., r_home, r_settings)
  • Sharp: Prefix s_ (e.g., s_home, s_settings)

Material Symbols

Google's newer Material Symbols collection with updated designs and expanded icon set.

Material Symbols Outlined

/**
 * Material Symbols Outlined - newer outlined symbol variants
 * CDN v244 - expanded set beyond Material Icons
 */
export declare const matSymbolOutlined: string;
// ... expanded Material Symbols set

Material Symbols Rounded

/**
 * Material Symbols Rounded - newer rounded symbol variants  
 * CDN v245 - expanded set beyond Material Icons
 */
export declare const matSymbolRounded: string;
// ... expanded Material Symbols set

Material Symbols Sharp

/**
 * Material Symbols Sharp - newer sharp symbol variants
 * CDN v241 - expanded set beyond Material Icons  
 */
export declare const matSymbolSharp: string;
// ... expanded Material Symbols set

Material Symbols CSS Import

/* Import Material Symbols CSS */
@import '@quasar/extras/material-symbols-outlined/material-symbols-outlined.css';
@import '@quasar/extras/material-symbols-rounded/material-symbols-rounded.css';
@import '@quasar/extras/material-symbols-sharp/material-symbols-sharp.css';

SVG Format

All Material Icons and Material Symbols SVG exports use the format:

Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 24 24')

The SVG path data can be used directly in SVG elements or with Quasar's QIcon component.

Install with Tessl CLI

npx tessl i tessl/npm-quasar--extras

docs

additional-icons.md

animations.md

fontawesome.md

index.md

ionicons.md

material-icons.md

mdi.md

roboto-font.md

tile.json