@quasar/extras

What is @quasar/extras?

@quasar/extras is a collection of additional resources for the Quasar Framework, including icon sets, font libraries, and other extras that can be used to enhance the visual and functional aspects of Quasar applications.

What are @quasar/extras's main functionalities?

Icon Sets

This feature allows you to import and use various icon sets such as Material Icons, FontAwesome, and more in your Quasar applications.

import 'quasar/icon-set/material-icons';

Font Libraries

This feature allows you to import and use different font libraries like Roboto, Material Icons, etc., to style your Quasar applications.

import 'quasar/fonts/roboto-font';

Animations

This feature allows you to import and use various CSS animations to enhance the user experience in your Quasar applications.

import 'quasar/animations/fadeIn.css';

Other packages similar to @quasar/extras

font-awesome

Font Awesome is a popular icon set and toolkit that provides a wide range of icons and social logos. It is similar to @quasar/extras in that it offers a collection of icons that can be easily integrated into web applications.

material-icons

Material Icons is a set of icons designed by Google and used in Material Design. It is similar to @quasar/extras in that it provides a comprehensive set of icons that can be used in web applications.

animate.css

Animate.css is a library of ready-to-use, cross-browser animations for use in web projects. It is similar to @quasar/extras in that it provides a collection of animations that can be easily integrated into web applications.

README

Quasar Framework Extras Package

Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!

Why?

Why this package? Because it strips down unnecessary package files (so faster download times), all in one place, tested and ready to use with Quasar. One other reason is that the material icons npm package sometimes fails to be downloaded by NPM.

Contents

Please make sure you have latest @quasar/extras npm package version installed into your project folder in order for you to benefit from everything below.

Webfonts

Vendor	Version	quasar.conf.js extras name	Description	Notes	License
Roboto Font	CDN v30	roboto-font	Recommended font along Material theme		License
Roboto Font Latin Extended	CDN v30	roboto-font-latin-ext	Recommended font along Material theme		License
Material Icons (Google)	CDN v139	material-icons	Material icons font	Requires: @quasar/extras 1.2+	License
Material Icons Outlined	CDN v108	material-icons-outlined	Material icons outlined font	Requires: @quasar/extras 1.2+	License
Material Icons Round	CDN v107	material-icons-round	Material icons round font	Requires: @quasar/extras 1.2+	License
Material Icons Sharp	CDN v108	material-icons-sharp	Material icons sharp font	Requires: @quasar/extras 1.2+	License
Material Symbols Outlined	CDN v76	material-symbols-outlined	Material symbols outlined font	Requires: @quasar/extras 1.14+	License
Material Symbols Rounded	CDN v76	material-symbols-rounded	Material symbols rounded font	Requires: @quasar/extras 1.14+	License
Material Symbols Sharp	CDN v75	material-symbols-sharp	Material symbols sharp font	Requires: @quasar/extras 1.14+	License
MDI v7 (Material Design Icons)	7.1.96	mdi-v7	Extended Material Design icons font	Requires: @quasar/extras 1.15+	License
MDI v6 (Material Design Icons)	6.9.96	mdi-v6	Extended Material Design icons font		License
MDI v5 (Material Design Icons)	5.9.55	mdi-v5	Extended Material Design icons font		License
MDI v4 (Material Design Icons)	4.9.95	mdi-v4	Extended Material Design icons font		License
MDI v3 (Material Design Icons)	3.6.95	mdi-v3	Extended Material Design icons font		License
Font Awesome v6	6.2.1	fontawesome-v6	Fontawesome icons font	Requires: @quasar/extras 1.13+	License
Font Awesome v5	5.15.4	fontawesome-v5	Fontawesome icons font		License
Ionicons	4.6.3	ionicons-v4	Ionicons font		License
Eva Icons	1.1.3	eva-icons	Eva Icons font		License
Themify Icons	1.0.1	themify	Themify Icons font		License
Line Awesome	1.3.0	line-awesome	Line Awesome font	Requires: @quasar/extras 1.5+	License
Bootstrap Icons	1.10.3	bootstrap-icons	Bootstrap Icons font	Requires: @quasar/extras 1.10+	License
Animate.css	4.1.1	Use animations prop	Bundle of animations you can use in your website/app		License

Install one of MDI v6, MDI v5, MDI v4 or MDI v3, but never together at the same time.

Note that ionicons v5+ no longer comes with a webfont.

SVG

Quasar v1.7+ required for svg Quasar Icon Sets.

Vendor	Version	Quasar IconSet name	Import Icons from	Notes	License
Material Icons (Google)	CDN v139	svg-material-icons	@quasar/extras/material-icons		License
Material Icons Outlined (Google)	CDN v108	svg-material-icons-outlined	@quasar/extras/material-icons-outlined	Requires: @quasar/extras 1.9+	License
Material Icons Round (Google)	CDN v107	svg-material-icons-round	@quasar/extras/material-icons-round	Requires: @quasar/extras 1.9+	License
Material Icons Sharp (Google)	CDN v108	svg-material-icons-sharp	@quasar/extras/material-icons-sharp	Requires: @quasar/extras 1.9+	License
Material Symbols Outlined (Google)	CDN v76	svg-material-symbols-outlined	@quasar/extras/material-symbols-outlined	Requires: @quasar/extras 1.14+	License
Material Symbols Rounded (Google)	CDN v76	svg-material-symbols-rounded	@quasar/extras/material-symbols-rounded	Requires: @quasar/extras 1.14+	License
Material Symbols Sharp (Google)	CDN v75	svg-material-symbols-sharp	@quasar/extras/material-symbols-sharp	Requires: @quasar/extras 1.14+	License
MDI v7 (Material Design Icons)	7.1.96	svg-mdi-v7	@quasar/extras/mdi-v7		License
MDI v6 (Material Design Icons)	6.9.96	svg-mdi-v6	@quasar/extras/mdi-v6		License
MDI v5 (Material Design Icons)	5.9.55	svg-mdi-v5	@quasar/extras/mdi-v5		License
MDI v4 (Material Design Icons)	4.9.95	svg-mdi-v4	@quasar/extras/mdi-v4		License
Font Awesome v6	6.2.1	svg-fontawesome-v6	@quasar/extras/fontawesome-v6	Requires: @quasar/extras 1.13+	License
Font Awesome v5	5.15.4	svg-fontawesome-v5	@quasar/extras/fontawesome-v5		License
Ionicons v6	6.1.1	svg-ionicons-v6	@quasar/extras/ionicons-v6	Requires: @quasar/extras 1.12+	Icon License
Ionicons v5	5.5.4	svg-ionicons-v5	@quasar/extras/ionicons-v5	Requires: @quasar/extras 1.7+	Icon License
Ionicons v4	4.6.3	svg-ionicons-v4	@quasar/extras/ionicons-v4	No icon font (woof) files for Ionicons since v4.6.3	Icon License
Eva Icons	1.1.3	svg-eva-icons	@quasar/extras/eva-icons		License
Themify Icons	1.0.1	svg-themify	@quasar/extras/themify		License
Line Awesome	1.3.0	svg-line-awesome	@quasar/extras/line-awesome	Requires: @quasar/extras 1.5+	License
Bootstrap Icons	1.10.3	svg-bootstrap-icons	@quasar/extras/bootstrap-icons	Requires: @quasar/extras 1.10+	License

Example:

// some .vue file in devland
<template>
  <div>
    <q-icon :name="matMenu" />
    <q-btn :icon="mdiAbTesting" />
  </div>
</template>

<script>
import { matMenu } from '@quasar/extras/material-icons'
import { mdiAbTesting } from '@quasar/extras/mdi-v5'

export default {
  // ...
  created () {
    this.matMenu = matMenu
    this.mdiAbTesting = mdiAbTesting
  }
}

QIcon cheatsheet

<q-icon name="..." />

Name	Prefix	Examples	Notes	License
material-icons	None	thumb_up	Notice the underline character instead of dash or space
material-icons-outlined	o_	o_thumb_up	Notice the underline character instead of dash or space
material-icons-round	r_	r_thumb_up	Notice the underline character instead of dash or space
material-icons-sharp	s_	s_thumb_up	Notice the underline character instead of dash or space
ionicons-v4	ion-, ion-md-, ion-ios-, ion-logo-	ion-heart, ion-logo-npm, ion-md-airplane	Use QIcon instead of <ion-icon> component; Logo icons require 'ion-logo-' prefix
fontawesome-v5	fa[s,r,l,b,d] fa-	"fas fa-ambulance"	QIcon "name" property is same as "class" attribute value in Fontawesome docs examples (where they show <i> tags)
mdi-v5	mdi-	mdi-alert-circle-outline	Notice the use of dash characters
eva-icons	eva-	eva-shield-outline, eva-activity-outline	Notice the use of dash characters
themify	ti-	ti-hand-point-up	Notice the use of dash characters
line-awesome	la[s,r,l,b,d] la-	"las la-atom"	QIcon "name" property is same as "class" attribute value in Line Awesome docs examples (where they show <i> tags)
bootstrap-icons	bi-	bi-bug-fill	Notice the use of dash characters

SVG name format

Svg icons will be defined as String with the following syntax:

Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 24 24')
Examples:
  M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z|0 0 24 24
  M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z

Supporting Quasar

Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome backers.

Please read our manifest on Why donations are important. If you'd like to become a donator, check out Quasar Framework's Donator campaign.

Documentation

Head on to the Quasar Framework official website: https://quasar.dev

Stay in Touch

For latest releases and announcements, follow on Twitter: @quasarframework

Chat Support

Ask questions at the official community Discord server: https://chat.quasar.dev

Community Forum

Head on to the official community forum: https://forum.quasar.dev

Semver

Using semver 2.0 notation for '@quasar/extras' package.

License

All assets included in this repository are exclusive property of their respective owners and licensed under their own respective licenses. Quasar does not take any credit in packages included here.