--- title: Quasar Icon Sets desc: How to configure icon sets for Quasar components. related: - title: Installing Icon Libraries path: installing-icon-libraries.md - title: Icon path: ../vue-components/icon.md --- Quasar components have their own icons. Rather than forcing you into using one icon library in particular (so that they can display correctly), Quasar lets you choose **which icons it should use for its components**. This is called a `Quasar Icon Set`. You can install multiple icon libraries, but you must choose only one to use on Quasar's components. Quasar currently supports: [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons), [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols), [Font Awesome](https://fontawesome.com/icons), [Ionicons](http://ionicons.com/), [MDI](https://materialdesignicons.com/), [Eva Icons](https://akveo.github.io/eva-icons), [Themify Icons](https://themify.me/themify-icons), [Line Awesome](https://icons8.com/line-awesome) and [Bootstrap Icons](https://icons.getbootstrap.com/). It is also possible to use your own icon files (SVG or any image format) with any Quasar component, see [QIcon | Image icons](../vue-components/icon.md#image-icons) page for more details. You can also provide an icon mapping function to add support for any other icon library or re-map some existing ones to your liking, see [QIcon | Custom mapping](../vue-components/icon.md#custom-mapping) for more details. You can use this to re-map long image file paths to short and understandable names, if using image icons, for example. > [!TIP] > Related pages: [Installing Icon Libraries](installing-icon-libraries.md) and [QIcon component](../vue-components/icon.md). ## IconSet API ### Props - `props` (object, required) Contents (icons) of the Quasar icon set Object shape: - `name` (string, required) Name of the Quasar icon set Examples: `'material-icons'`, `'eva-icons'` - `type` (object, optional) Generic types Object shape: - `positive` (string, optional) Icon name following Quasar convention Examples: `'check_circle'` - `negative` (string, optional) Icon name following Quasar convention Examples: `'warning'` - `info` (string, optional) Icon name following Quasar convention Examples: `'info'` - `warning` (string, optional) Icon name following Quasar convention Examples: `'priority_high'` - `arrow` (object, optional) Arrow types Object shape: - `up` (string, optional) Icon name following Quasar convention Examples: `'arrow_upward'` - `right` (string, optional) Icon name following Quasar convention Examples: `'arrow_forward'` - `down` (string, optional) Icon name following Quasar convention Examples: `'arrow_downward'` - `left` (string, optional) Icon name following Quasar convention Examples: `'arrow_back'` - `dropdown` (string, optional) Icon name following Quasar convention Examples: `'arrow_drop_down'` - `chevron` (object, optional) Chevron types Object shape: - `left` (string, optional) Icon name following Quasar convention Examples: `'chevron_left'` - `right` (string, optional) Icon name following Quasar convention Examples: `'chevron_right'` - `colorPicker` (object, optional) Used by QColorPicker Object shape: - `spectrum` (string, optional) Icon name following Quasar convention Examples: `'gradient'` - `tune` (string, optional) Icon name following Quasar convention Examples: `'tune'` - `palette` (string, optional) Icon name following Quasar convention Examples: `'style'` - `pullToRefresh` (object, optional) Used by QPullToRefresh Object shape: - `icon` (string, optional) Icon name following Quasar convention Examples: `'refresh'` - `carousel` (object, optional) Used by QCarousel Object shape: - `left` (string, optional) Icon name following Quasar convention Examples: `'chevron_left'` - `right` (string, optional) Icon name following Quasar convention Examples: `'chevron_right'` - `up` (string, optional) Icon name following Quasar convention Examples: `'keyboard_arrow_up'` - `down` (string, optional) Icon name following Quasar convention Examples: `'keyboard_arrow_down'` - `navigationIcon` (string, optional) Icon name following Quasar convention Examples: `'lens'` - `chip` (object, optional) Used by QChip Object shape: - `remove` (string, optional) Icon name following Quasar convention Examples: `'cancel'` - `selected` (string, optional) Icon name following Quasar convention Examples: `'check'` - `datetime` (object, optional) Used by QDate/QTime Object shape: - `arrowLeft` (string, optional) Icon name following Quasar convention Examples: `'chevron_left'` - `arrowRight` (string, optional) Icon name following Quasar convention Examples: `'chevron_right'` - `now` (string, optional) Icon name following Quasar convention Examples: `'access_time'` - `today` (string, optional) Icon name following Quasar convention Examples: `'today'` - `editor` (object, optional) Used by QEditor Object shape: - `bold` (string, optional) Icon name following Quasar convention Examples: `'format_bold'` - `italic` (string, optional) Icon name following Quasar convention Examples: `'format_italic'` - `strikethrough` (string, optional) Icon name following Quasar convention Examples: `'strikethrough_s'` - `underline` (string, optional) Icon name following Quasar convention Examples: `'format_underlined'` - `unorderedList` (string, optional) Icon name following Quasar convention Examples: `'format_list_bulleted'` - `orderedList` (string, optional) Icon name following Quasar convention Examples: `'format_list_numbered'` - `subscript` (string, optional) Icon name following Quasar convention Examples: `'vertical_align_bottom'` - `superscript` (string, optional) Icon name following Quasar convention Examples: `'vertical_align_top'` - `hyperlink` (string, optional) Icon name following Quasar convention Examples: `'link'` - `toggleFullscreen` (string, optional) Icon name following Quasar convention Examples: `'fullscreen'` - `quote` (string, optional) Icon name following Quasar convention Examples: `'format_quote'` - `left` (string, optional) Icon name following Quasar convention Examples: `'format_align_left'` - `center` (string, optional) Icon name following Quasar convention Examples: `'format_align_center'` - `right` (string, optional) Icon name following Quasar convention Examples: `'format_align_right'` - `justify` (string, optional) Icon name following Quasar convention Examples: `'format_align_justify'` - `print` (string, optional) Icon name following Quasar convention Examples: `'print'` - `outdent` (string, optional) Icon name following Quasar convention Examples: `'format_indent_decrease'` - `indent` (string, optional) Icon name following Quasar convention Examples: `'format_indent_increase'` - `removeFormat` (string, optional) Icon name following Quasar convention Examples: `'format_clear'` - `formatting` (string, optional) Icon name following Quasar convention Examples: `'text_format'` - `fontSize` (string, optional) Icon name following Quasar convention Examples: `'format_size'` - `align` (string, optional) Icon name following Quasar convention Examples: `'format_align_left'` - `hr` (string, optional) Icon name following Quasar convention Examples: `'remove'` - `undo` (string, optional) Icon name following Quasar convention Examples: `'undo'` - `redo` (string, optional) Icon name following Quasar convention Examples: `'redo'` - `heading` (string, optional) Used only when headingX is missing; Icon name following Quasar convention Examples: `'format_size'` - `heading1` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `heading2` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `heading3` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `heading4` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `heading5` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `heading6` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `code` (string, optional) Icon name following Quasar convention Examples: `'code'` - `size` (string, optional) Used only when sizeX is missing; Icon name following Quasar convention Examples: `'format_size'` - `size1` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size2` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size3` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size4` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size5` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size6` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size7` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `font` (string, optional) Icon name following Quasar convention Examples: `'font_download'` - `viewSource` (string, optional) Icon name following Quasar convention Examples: `'code'` - `expansionItem` (object, optional) Used by QExpansionItem Object shape: - `icon` (string, optional) Icon name following Quasar convention Examples: `'keyboard_arrow_down'` - `denseIcon` (string, optional) Icon name following Quasar convention Examples: `'arrow_drop_down'` - `fab` (object, optional) Used by QFab Object shape: - `icon` (string, optional) Icon name following Quasar convention Examples: `'add'` - `activeIcon` (string, optional) Icon name following Quasar convention Examples: `'close'` - `field` (object, optional) Used by QField/QInput/QSelect/... Object shape: - `clear` (string, optional) Icon name following Quasar convention Examples: `'cancel'` - `error` (string, optional) Icon name following Quasar convention Examples: `'error'` - `pagination` (object, optional) Used by QPagination Object shape: - `first` (string, optional) Icon name following Quasar convention Examples: `'first_page'` - `prev` (string, optional) Icon name following Quasar convention Examples: `'keyboard_arrow_left'` - `next` (string, optional) Icon name following Quasar convention Examples: `'keyboard_arrow_right'` - `last` (string, optional) Icon name following Quasar convention Examples: `'last_page'` - `rating` (object, optional) Used by QRating Object shape: - `icon` (string, optional) Icon name following Quasar convention Examples: `'grade'` - `stepper` (object, optional) Used by QStepper Object shape: - `done` (string, optional) Icon name following Quasar convention Examples: `'check'` - `active` (string, optional) Icon name following Quasar convention Examples: `'edit'` - `error` (string, optional) Icon name following Quasar convention Examples: `'warning'` - `tabs` (object, optional) Used by QTabs Object shape: - `left` (string, optional) Icon name following Quasar convention Examples: `'chevron_left'` - `right` (string, optional) Icon name following Quasar convention Examples: `'chevron_right'` - `up` (string, optional) Icon name following Quasar convention Examples: `'keyboard_arrow_up'` - `down` (string, optional) Icon name following Quasar convention Examples: `'keyboard_arrow_down'` - `table` (object, optional) Used by QTable Object shape: - `arrowUp` (string, optional) Icon name following Quasar convention Examples: `'arrow_upward'` - `warning` (string, optional) Icon name following Quasar convention Examples: `'warning'` - `firstPage` (string, optional) Icon name following Quasar convention Examples: `'first_page'` - `prevPage` (string, optional) Icon name following Quasar convention Examples: `'chevron_left'` - `nextPage` (string, optional) Icon name following Quasar convention Examples: `'chevron_right'` - `lastPage` (string, optional) Icon name following Quasar convention Examples: `'last_page'` - `tree` (object, optional) Used by QTree Object shape: - `icon` (string, optional) Icon name following Quasar convention Examples: `'play_arrow'` - `uploader` (object, optional) Used by QUploader Object shape: - `done` (string, optional) Icon name following Quasar convention Examples: `'done'` - `clear` (string, optional) Icon name following Quasar convention Examples: `'clear'` - `add` (string, optional) Icon name following Quasar convention Examples: `'add_box'` - `upload` (string, optional) Icon name following Quasar convention Examples: `'cloud_upload'` - `removeQueue` (string, optional) Icon name following Quasar convention Examples: `'clear_all'` - `removeUploaded` (string, optional) Icon name following Quasar convention Examples: `'done_all'` - `iconMapFn` (Function, optional) Function to map icon names to other icon names; It is designed to be used internally by Quasar only; Only assign a function to it, but do not call it yourself Function signature: `(iconName: string) => object` Examples: `iconName => (myIcons[ iconName ] !== void 0? { icon: myIcons[ iconName ] } : void 0)` ### Methods - `set(iconSet: object, ssrContent?: object): void` Set another Quasar Icon Set Params: - `iconSet` (object, required) Usually you will import such an object directly from quasar (eg: import qIconSet from 'quasar/icon-set/') Object shape: - `name` (string, required) Name of the Quasar icon set Examples: `'material-icons'`, `'eva-icons'` - `type` (object, required) Generic types Object shape: - `positive` (string, required) Icon name following Quasar convention Examples: `'check_circle'` - `negative` (string, required) Icon name following Quasar convention Examples: `'warning'` - `info` (string, required) Icon name following Quasar convention Examples: `'info'` - `warning` (string, required) Icon name following Quasar convention Examples: `'priority_high'` - `arrow` (object, required) Arrow types Object shape: - `up` (string, required) Icon name following Quasar convention Examples: `'arrow_upward'` - `right` (string, required) Icon name following Quasar convention Examples: `'arrow_forward'` - `down` (string, required) Icon name following Quasar convention Examples: `'arrow_downward'` - `left` (string, required) Icon name following Quasar convention Examples: `'arrow_back'` - `dropdown` (string, required) Icon name following Quasar convention Examples: `'arrow_drop_down'` - `chevron` (object, required) Chevron types Object shape: - `left` (string, required) Icon name following Quasar convention Examples: `'chevron_left'` - `right` (string, required) Icon name following Quasar convention Examples: `'chevron_right'` - `colorPicker` (object, optional) Used by QColorPicker Object shape: - `spectrum` (string, required) Icon name following Quasar convention Examples: `'gradient'` - `tune` (string, required) Icon name following Quasar convention Examples: `'tune'` - `palette` (string, required) Icon name following Quasar convention Examples: `'style'` - `pullToRefresh` (object, required) Used by QPullToRefresh Object shape: - `icon` (string, required) Icon name following Quasar convention Examples: `'refresh'` - `carousel` (object, required) Used by QCarousel Object shape: - `left` (string, required) Icon name following Quasar convention Examples: `'chevron_left'` - `right` (string, required) Icon name following Quasar convention Examples: `'chevron_right'` - `up` (string, required) Icon name following Quasar convention Examples: `'keyboard_arrow_up'` - `down` (string, required) Icon name following Quasar convention Examples: `'keyboard_arrow_down'` - `navigationIcon` (string, required) Icon name following Quasar convention Examples: `'lens'` - `chip` (object, required) Used by QChip Object shape: - `remove` (string, required) Icon name following Quasar convention Examples: `'cancel'` - `selected` (string, required) Icon name following Quasar convention Examples: `'check'` - `datetime` (object, required) Used by QDate/QTime Object shape: - `arrowLeft` (string, required) Icon name following Quasar convention Examples: `'chevron_left'` - `arrowRight` (string, required) Icon name following Quasar convention Examples: `'chevron_right'` - `now` (string, required) Icon name following Quasar convention Examples: `'access_time'` - `today` (string, required) Icon name following Quasar convention Examples: `'today'` - `editor` (object, required) Used by QEditor Object shape: - `bold` (string, required) Icon name following Quasar convention Examples: `'format_bold'` - `italic` (string, required) Icon name following Quasar convention Examples: `'format_italic'` - `strikethrough` (string, required) Icon name following Quasar convention Examples: `'strikethrough_s'` - `underline` (string, required) Icon name following Quasar convention Examples: `'format_underlined'` - `unorderedList` (string, required) Icon name following Quasar convention Examples: `'format_list_bulleted'` - `orderedList` (string, required) Icon name following Quasar convention Examples: `'format_list_numbered'` - `subscript` (string, required) Icon name following Quasar convention Examples: `'vertical_align_bottom'` - `superscript` (string, required) Icon name following Quasar convention Examples: `'vertical_align_top'` - `hyperlink` (string, required) Icon name following Quasar convention Examples: `'link'` - `toggleFullscreen` (string, required) Icon name following Quasar convention Examples: `'fullscreen'` - `quote` (string, required) Icon name following Quasar convention Examples: `'format_quote'` - `left` (string, required) Icon name following Quasar convention Examples: `'format_align_left'` - `center` (string, required) Icon name following Quasar convention Examples: `'format_align_center'` - `right` (string, required) Icon name following Quasar convention Examples: `'format_align_right'` - `justify` (string, required) Icon name following Quasar convention Examples: `'format_align_justify'` - `print` (string, required) Icon name following Quasar convention Examples: `'print'` - `outdent` (string, required) Icon name following Quasar convention Examples: `'format_indent_decrease'` - `indent` (string, required) Icon name following Quasar convention Examples: `'format_indent_increase'` - `removeFormat` (string, required) Icon name following Quasar convention Examples: `'format_clear'` - `formatting` (string, required) Icon name following Quasar convention Examples: `'text_format'` - `fontSize` (string, required) Icon name following Quasar convention Examples: `'format_size'` - `align` (string, required) Icon name following Quasar convention Examples: `'format_align_left'` - `hr` (string, required) Icon name following Quasar convention Examples: `'remove'` - `undo` (string, required) Icon name following Quasar convention Examples: `'undo'` - `redo` (string, required) Icon name following Quasar convention Examples: `'redo'` - `heading` (string, required) Used only when headingX is missing; Icon name following Quasar convention Examples: `'format_size'` - `heading1` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `heading2` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `heading3` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `heading4` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `heading5` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `heading6` (string, optional) (Can be omitted; defaults to 'heading' instead) Icon name following Quasar convention Examples: `'format_size'` - `code` (string, required) Icon name following Quasar convention Examples: `'code'` - `size` (string, required) Used only when sizeX is missing; Icon name following Quasar convention Examples: `'format_size'` - `size1` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size2` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size3` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size4` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size5` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size6` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `size7` (string, optional) (Can be omitted; defaults to 'size' instead) Icon name following Quasar convention Examples: `'format_size'` - `font` (string, required) Icon name following Quasar convention Examples: `'font_download'` - `viewSource` (string, required) Icon name following Quasar convention Examples: `'code'` - `expansionItem` (object, required) Used by QExpansionItem Object shape: - `icon` (string, required) Icon name following Quasar convention Examples: `'keyboard_arrow_down'` - `denseIcon` (string, required) Icon name following Quasar convention Examples: `'arrow_drop_down'` - `fab` (object, required) Used by QFab Object shape: - `icon` (string, required) Icon name following Quasar convention Examples: `'add'` - `activeIcon` (string, required) Icon name following Quasar convention Examples: `'close'` - `field` (object, required) Used by QField/QInput/QSelect/... Object shape: - `clear` (string, required) Icon name following Quasar convention Examples: `'cancel'` - `error` (string, required) Icon name following Quasar convention Examples: `'error'` - `pagination` (object, required) Used by QPagination Object shape: - `first` (string, required) Icon name following Quasar convention Examples: `'first_page'` - `prev` (string, required) Icon name following Quasar convention Examples: `'keyboard_arrow_left'` - `next` (string, required) Icon name following Quasar convention Examples: `'keyboard_arrow_right'` - `last` (string, required) Icon name following Quasar convention Examples: `'last_page'` - `rating` (object, required) Used by QRating Object shape: - `icon` (string, required) Icon name following Quasar convention Examples: `'grade'` - `stepper` (object, required) Used by QStepper Object shape: - `done` (string, required) Icon name following Quasar convention Examples: `'check'` - `active` (string, required) Icon name following Quasar convention Examples: `'edit'` - `error` (string, required) Icon name following Quasar convention Examples: `'warning'` - `tabs` (object, required) Used by QTabs Object shape: - `left` (string, required) Icon name following Quasar convention Examples: `'chevron_left'` - `right` (string, required) Icon name following Quasar convention Examples: `'chevron_right'` - `up` (string, required) Icon name following Quasar convention Examples: `'keyboard_arrow_up'` - `down` (string, required) Icon name following Quasar convention Examples: `'keyboard_arrow_down'` - `table` (object, required) Used by QTable Object shape: - `arrowUp` (string, required) Icon name following Quasar convention Examples: `'arrow_upward'` - `warning` (string, required) Icon name following Quasar convention Examples: `'warning'` - `firstPage` (string, required) Icon name following Quasar convention Examples: `'first_page'` - `prevPage` (string, required) Icon name following Quasar convention Examples: `'chevron_left'` - `nextPage` (string, required) Icon name following Quasar convention Examples: `'chevron_right'` - `lastPage` (string, required) Icon name following Quasar convention Examples: `'last_page'` - `tree` (object, required) Used by QTree Object shape: - `icon` (string, required) Icon name following Quasar convention Examples: `'play_arrow'` - `uploader` (object, required) Used by QUploader Object shape: - `done` (string, required) Icon name following Quasar convention Examples: `'done'` - `clear` (string, required) Icon name following Quasar convention Examples: `'clear'` - `add` (string, required) Icon name following Quasar convention Examples: `'add_box'` - `upload` (string, required) Icon name following Quasar convention Examples: `'cloud_upload'` - `removeQueue` (string, required) Icon name following Quasar convention Examples: `'clear_all'` - `removeUploaded` (string, required) Icon name following Quasar convention Examples: `'done_all'` - `ssrContent` (object, optional) Required for SSR/SSG only ### Vue Injection Accessible via `$q.iconSet` (e.g., `this.$q.iconSet` in Options API or `useQuasar().iconSet` in Composition API). ## Configuring the default Icon Set **There are two types of Quasar Icon Sets: webfont-based and svg-based.** Unless configured otherwise, Quasar uses Material Icons webfont as the icon set for its components. You can however tell Quasar to use some other Icon Set, but if it's a webfont-based one then be sure to include its icon library in your website/app (see [Installing Icon Libraries](installing-icon-libraries.md)). ### Hardcoded If the default Quasar Icon Set is not dynamically determined (does not depends on cookies for example), then you can: #### Quasar CLI Way We edit the `/quasar.config` file again: ```js framework: { // webfont-based example iconSet: 'mdi-v7' } ``` ```js framework: { // svg-based example iconSet: 'svg-mdi-v7' } ``` For all available options, visit the [GitHub](https://github.com/quasarframework/quasar/tree/dev/ui/icon-set) repository. Full example of including MDI & Fontawesome and telling Quasar to use Fontawesome for its components. ```js extras: [ 'mdi-v7', 'fontawesome-v7' ], framework: { iconSet: 'fontawesome-v7' } ``` This will enable you to use both MDI & Fontawesome webfonts in your app, and all Quasar components will display Fontawesome icons. #### Quasar UMD Way Include the Quasar Icon Set tag for your Quasar version and also tell Quasar to use it. Example: ```html ``` Check what tags you need to include in your HTML files on [UMD / Standalone](../start/umd.md) page. #### Quasar Vite Plugin Way We edit your `main.js`: ```js // ... import { Quasar } from 'quasar' // ... import iconSet from 'quasar/icon-set/fontawesome-v7' import '@quasar/extras/fontawesome-v7/fontawesome-v7.css' // ... app.use(Quasar, { // ..., iconSet: iconSet }) ``` ### Dynamic (on non-SSR/SSG) Quasar CLI: If your desired Quasar Icon Set must be dynamically selected (example: depends on a cookie), then you need to create a boot file: `quasar new boot quasar-icon-set [--format ts]`. This will create `/src/boot/quasar-icon-set.js` file. Edit it to: ```js import { defineBoot } from '#q-app' import { IconSet } from 'quasar' // relative path to your node_modules/quasar/.. // change to YOUR path const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.js') // or just a select few (example below with only mdi-v7 and fontawesome-v7): // import.meta.glob('../../node_modules/quasar/icon-set/{mdi-v7,fontawesome-v7}.js') export default defineBoot(async () => { const iconSetName = 'mdi-v7' // ... some logic to determine it (use Cookies Plugin?) try { iconSetList[ `../../node_modules/quasar/icon-set/${ iconSetName }.js` ]().then(lang => { IconSet.set(setDefinition.default) }) } catch (err) { console.error(err) // Requested Quasar Icon Set does not exist, // let's not break the app, so catching error } }) ``` Then register this boot file into the `/quasar.config` file: ```js boot: ['quasar-icon-set'] ``` ### Dynamic (on SSR/SSG) When dealing with SSR/SSG, we can't use singleton objects because that would pollute sessions. As a result, as opposed to the dynamical example above (read it first!), you must also specify the `ssrContext` from your boot file: ```js import { defineBoot } from '#q-app' import { IconSet } from 'quasar' // relative path to your node_modules/quasar/.. // change to YOUR path const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.js') // or just a select few (example below with only mdi-v7 and fontawesome-v7): // import.meta.glob('../../node_modules/quasar/icon-set/{mdi-v7,fontawesome-v7}.js') // ! NOTICE ssrContext param: export default defineBoot(async ({ ssrContext }) => { const iconSetName = 'mdi-v7' // ... some logic to determine it (use Cookies Plugin?) try { iconSetList[ `../../node_modules/quasar/icon-set/${ iconSetName }.js` ]().then(lang => { IconSet.set(setDefinition.default, ssrContext) }) } catch (err) { console.error(err) // Requested Quasar Icon Set does not exist, // let's not break the app, so catching error } }) ``` ## Change Quasar Icon Set at Runtime ### Changing Icon Set Quasar Icon Set is reactive, so all components will update properly if you change the $q.iconSet object. Here is an example: ```js import { useQuasar } from 'quasar' import mdiIconSet from 'quasar/icon-set/mdi-v7.js' setup () { const $q = useQuasar() function changeIconSetToMdiIconSet () { $q.iconSet.set(mdiIconSet) } return { changeIconSetToMdiIconSet } } ``` If you want to do this outside of a .vue file (and you are NOT on SSR/SSG mode) then you can ```js import { defineBoot } from '#q-app' import { IconSet } from 'quasar' import mdiIconSet from 'quasar/icon-set/mdi-v7.js' export default defineBoot(() { IconSet.set(mdiIconSet) }) ``` ### Changing a Specific Icon If you want to change a specific icon to another, you can. Here is an example: ```js import { useQuasar } from 'quasar' setup () { const $q = useQuasar() function changeQEditorHeaderIcon () { $q.iconSet.editor.header1 = 'fas fa-font' } return { changeQEditorHeaderIcon } } ``` If you want to do this outside of a .vue file (and you are NOT on SSR/SSG mode) then you can ```js import { IconSet } from 'quasar' export default () { IconSet.props.editor.header1 = 'fas fa-font' } ```