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

mdi.mddocs/

Material Design Icons (MDI)

Extended Material Design icons collection from the community, providing thousands of additional icons beyond Google's official set. Multiple versions are available for compatibility with different projects.

Capabilities

MDI v7 (Latest)

Latest version of Material Design Icons (v7.4.47) with newest icons and improvements.

/**
 * MDI v7 SVG exports - each constant contains SVG path data
 * Prefix: mdi for SVG exports, mdi- for webfont
 */
export declare const mdiAccount: string;
export declare const mdiAccountAlert: string;
export declare const mdiAccountAlertOutline: string;
export declare const mdiAccountBox: string;
export declare const mdiAccountBoxOutline: string;
export declare const mdiAccountCircle: string;
export declare const mdiAccountCircleOutline: string;
export declare const mdiAccountGroup: string;
export declare const mdiAccountGroupOutline: string;
export declare const mdiHome: string;
export declare const mdiHomeOutline: string;
export declare const mdiHomeVariant: string;
export declare const mdiHomeVariantOutline: string;
export declare const mdiAlert: string;
export declare const mdiAlertCircle: string;
export declare const mdiAlertCircleOutline: string;
export declare const mdiAlertDecagram: string;
export declare const mdiAlertDecagramOutline: string;
export declare const mdiAlertOctagon: string;
export declare const mdiAlertOctagonOutline: string;
export declare const mdiAlertOutline: string;
export declare const mdiPlus: string;
export declare const mdiPlusCircle: string;
export declare const mdiPlusCircleOutline: string;
export declare const mdiPlusBox: string;
export declare const mdiPlusBoxOutline: string;
export declare const mdiMinus: string;
export declare const mdiMinusCircle: string;
export declare const mdiMinusCircleOutline: string;
export declare const mdiMinusBox: string;
export declare const mdiMinusBoxOutline: string;
export declare const mdiClose: string;
export declare const mdiCloseCircle: string;
export declare const mdiCloseCircleOutline: string;
export declare const mdiCloseBox: string;
export declare const mdiCloseBoxOutline: string;
export declare const mdiCheck: string;
export declare const mdiCheckCircle: string;
export declare const mdiCheckCircleOutline: string;
export declare const mdiCheckBox: string;
export declare const mdiCheckboxMarked: string;
export declare const mdiCheckboxBlankOutline: string;
export declare const mdiMenu: string;
export declare const mdiMenuDown: string;
export declare const mdiMenuUp: string;
export declare const mdiMenuLeft: string;
export declare const mdiMenuRight: string;
export declare const mdiDotsVertical: string;
export declare const mdiDotsHorizontal: string;
export declare const mdiSettings: string;
export declare const mdiSettingsOutline: string;
export declare const mdiCog: string;
export declare const mdiCogOutline: string;
export declare const mdiDelete: string;
export declare const mdiDeleteOutline: string;
export declare const mdiDeleteCircle: string;
export declare const mdiDeleteCircleOutline: string;
export declare const mdiTrashCan: string;
export declare const mdiTrashCanOutline: string;
export declare const mdiEdit: string;
export declare const mdiEditOutline: string;
export declare const mdiPencil: string;
export declare const mdiPencilOutline: string;
export declare const mdiContentSave: string;
export declare const mdiContentSaveOutline: string;
export declare const mdiDownload: string;
export declare const mdiDownloadOutline: string;
export declare const mdiUpload: string;
export declare const mdiUploadOutline: string;
export declare const mdiHeart: string;
export declare const mdiHeartOutline: string;
export declare const mdiShare: string;
export declare const mdiShareVariant: string;
export declare const mdiShareVariantOutline: string;
export declare const mdiMagnify: string;
export declare const mdiEye: string;
export declare const mdiEyeOff: string;
export declare const mdiEyeOutline: string;
export declare const mdiEyeOffOutline: string;
export declare const mdiEmail: string;
export declare const mdiEmailOutline: string;
export declare const mdiPhone: string;
export declare const mdiPhoneOutline: string;
export declare const mdiMessage: string;
export declare const mdiMessageOutline: string;
export declare const mdiBell: string;
export declare const mdiBellOutline: string;
export declare const mdiBellRing: string;
export declare const mdiBellRingOutline: string;
export declare const mdiCalendar: string;
export declare const mdiCalendarOutline: string;
export declare const mdiCalendarToday: string;
export declare const mdiClock: string;
export declare const mdiClockOutline: string;
export declare const mdiMapMarker: string;
export declare const mdiMapMarkerOutline: string;
export declare const mdiLock: string;
export declare const mdiLockOutline: string;
export declare const mdiLockOpen: string;
export declare const mdiLockOpenOutline: string;
export declare const mdiStar: string;
export declare const mdiStarOutline: string;
export declare const mdiShoppingCart: string;
export declare const mdiShoppingCartOutline: string;
export declare const mdiCreditCard: string;
export declare const mdiCreditCardOutline: string;
// ... and thousands more icons

Usage Examples:

import { 
  mdiAccount, 
  mdiHome, 
  mdiSettings, 
  mdiPlus, 
  mdiDelete,
  mdiEdit,
  mdiHeart,
  mdiShare
} from "@quasar/extras/mdi-v7";

// Use with Quasar QIcon
<template>
  <q-icon :name="homeIcon" />
  <q-btn :icon="addIcon" color="primary" />
  <q-btn :icon="editIcon" flat round />
  <q-btn :icon="deleteIcon" color="negative" />
</template>

<script>
export default {
  data() {
    return {
      homeIcon: mdiHome,
      addIcon: mdiPlus,
      editIcon: mdiEdit,
      deleteIcon: mdiDelete,
      accountIcon: mdiAccount,
      settingsIcon: mdiSettings,
      heartIcon: mdiHeart,
      shareIcon: mdiShare
    };
  }
}
</script>

MDI v6

Material Design Icons v6.9.96 for compatibility with older projects.

/**
 * MDI v6 SVG exports - similar structure to v7 but older icon set
 */
export declare const mdiAccount: string;
export declare const mdiHome: string;
export declare const mdiSettings: string;
export declare const mdiPlus: string;
export declare const mdiMinus: string;
export declare const mdiClose: string;
export declare const mdiCheck: string;
export declare const mdiAlert: string;
export declare const mdiDelete: string;
export declare const mdiEdit: string;
export declare const mdiHeart: string;
export declare const mdiShare: string;
export declare const mdiMenu: string;
export declare const mdiMagnify: string;
export declare const mdiEye: string;
export declare const mdiEyeOff: string;
// ... more v6 icons

MDI v5

Material Design Icons v5.9.55 for legacy compatibility.

/**
 * MDI v5 SVG exports - legacy version
 */
export declare const mdiAccount: string;
export declare const mdiHome: string;
export declare const mdiSettings: string;
export declare const mdiPlus: string;
export declare const mdiMinus: string;
export declare const mdiClose: string;
export declare const mdiCheck: string;
export declare const mdiAlert: string;
export declare const mdiDelete: string;
export declare const mdiEdit: string;
// ... more v5 icons

MDI v4

Material Design Icons v4.9.95 for legacy compatibility.

/**
 * MDI v4 SVG exports - legacy version  
 */
export declare const mdiAccount: string;
export declare const mdiHome: string;
export declare const mdiSettings: string;
export declare const mdiPlus: string;
export declare const mdiMinus: string;
export declare const mdiClose: string;
export declare const mdiCheck: string;
export declare const mdiAlert: string;
export declare const mdiDelete: string;
export declare const mdiEdit: string;
// ... more v4 icons

Webfont Usage

CSS Import

/* Import MDI CSS - only use one version at a time */
@import '@quasar/extras/mdi-v7/mdi-v7.css';
/* OR */
@import '@quasar/extras/mdi-v6/mdi-v6.css';
/* OR */  
@import '@quasar/extras/mdi-v5/mdi-v5.css';
/* OR */
@import '@quasar/extras/mdi-v4/mdi-v4.css';

HTML Usage

<!-- MDI webfont classes use mdi- prefix -->
<i class="mdi mdi-account"></i>
<i class="mdi mdi-home"></i>
<i class="mdi mdi-settings"></i>
<i class="mdi mdi-plus"></i>
<i class="mdi mdi-minus"></i>
<i class="mdi mdi-close"></i>
<i class="mdi mdi-check"></i>
<i class="mdi mdi-alert"></i>
<i class="mdi mdi-delete"></i>
<i class="mdi mdi-pencil"></i>
<i class="mdi mdi-heart"></i>
<i class="mdi mdi-share"></i>

QIcon Usage

<!-- With Quasar QIcon component -->
<q-icon name="mdi-account" />
<q-icon name="mdi-home" />
<q-icon name="mdi-settings" />
<q-icon name="mdi-plus" />
<q-icon name="mdi-delete" />

Version Compatibility

Important: Only install one MDI version at a time to avoid conflicts:

  • MDI v7: Latest features and icons (recommended for new projects)
  • MDI v6: Stable version with good icon coverage
  • MDI v5: Legacy support for older Quasar versions
  • MDI v4: Legacy support for very old projects

Icon Naming Convention

SVG Export Names

  • Prefix: mdi (e.g., mdiHome, mdiAccount)
  • CamelCase after prefix
  • Outline variants end with Outline (e.g., mdiHomeOutline)

Webfont Class Names

  • Prefix: mdi- (e.g., mdi-home, mdi-account)
  • Kebab-case after prefix
  • Use dash characters instead of spaces or underscores

SVG Format

All MDI SVG exports follow the same format as Material Icons:

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

The SVG path data works with both SVG elements and 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