https://quasar.dev/a/quasar-icon-sets.js

1import{H as e,T as t,Z as n,ft as r,p as i,v as a,w as o,y as s}from"./v.js";import{It as c}from"./q.js";import{t as l}from"./DocCode.js";import"./DocCopyBtn.js";import{t as u}from"./page-utils.js";import{t as d}from"./DocPage.js";import{t as f}from"./DocApi.js";import{t as p}from"./DocLink.js";import{t as m}from"./DocPrerender.js";var h={class:`doc-note doc-note--note`},g={__name:`quasar-icon-sets`,setup(g){let _=[{name:`Installing Icon Libraries`,category:`Options & Helpers`,path:`/options/installing-icon-libraries`},{name:`Icon`,category:`Vue Components`,path:`/vue-components/icon`}],v=[{name:`Installing Icon Libraries`,category:`Options & Helpers`,path:`/options/installing-icon-libraries`,classes:`doc-page__related--left`},{name:`Platform Detection`,category:`Options & Helpers`,path:`/options/platform-detection`,classes:`doc-page__related--right`}],y=[{id:`iconset-api`,title:`2. IconSet API`,deep:!0},{id:`configuring-the-default-icon-set`,title:`3. Configuring the default Icon Set`},{id:`hardcoded`,title:`3.1. Hardcoded`,sub:!0},{id:`dynamic-on-non-ssr-ssg`,title:`3.2. Dynamic (on non-SSR/SSG)`,sub:!0},{id:`dynamic-on-ssr-ssg`,title:`3.3. Dynamic (on SSR/SSG)`,sub:!0},{id:`change-quasar-icon-set-at-runtime`,title:`4. Change Quasar Icon Set at Runtime`},{id:`changing-icon-set`,title:`4.1. Changing Icon Set`,sub:!0},{id:`changing-a-specific-icon`,title:`4.2. Changing a Specific Icon`,sub:!0}];return(g,b)=>(e(),s(d,{title:`Quasar Icon Sets`,desc:`How to configure icon sets for Quasar components.`,heading:``,"edit-link":`options/quasar-icon-sets`,"md-link":``,toc:y,related:_,nav:v},{default:n(()=>[b[70]||=a(`p`,null,[o(`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 `),a(`strong`,null,`which icons it should use for its components`),o(`. This is called a `),a(`code`,{class:`doc-token`},`Quasar Icon Set`),o(`.`)],-1),b[71]||=a(`p`,null,`You can install multiple icon libraries, but you must choose only one to use on Quasar’s components.`,-1),a(`p`,null,[b[29]||=o(`Quasar currently supports: `,-1),t(p,{to:`https://fonts.google.com/icons?icon.set=Material+Icons`},{default:n(()=>[...b[20]||=[o(`Material Icons`,-1)]]),_:1}),b[30]||=o(`, `,-1),t(p,{to:`https://fonts.google.com/icons?icon.set=Material+Symbols`},{default:n(()=>[...b[21]||=[o(`Material Symbols`,-1)]]),_:1}),b[31]||=o(`, `,-1),t(p,{to:`https://fontawesome.com/icons`},{default:n(()=>[...b[22]||=[o(`Font Awesome`,-1)]]),_:1}),b[32]||=o(`, `,-1),t(p,{to:`http://ionicons.com/`},{default:n(()=>[...b[23]||=[o(`Ionicons`,-1)]]),_:1}),b[33]||=o(`, `,-1),t(p,{to:`https://materialdesignicons.com/`},{default:n(()=>[...b[24]||=[o(`MDI`,-1)]]),_:1}),b[34]||=o(`, `,-1),t(p,{to:`https://akveo.github.io/eva-icons`},{default:n(()=>[...b[25]||=[o(`Eva Icons`,-1)]]),_:1}),b[35]||=o(`, `,-1),t(p,{to:`https://themify.me/themify-icons`},{default:n(()=>[...b[26]||=[o(`Themify Icons`,-1)]]),_:1}),b[36]||=o(`, `,-1),t(p,{to:`https://icons8.com/line-awesome`},{default:n(()=>[...b[27]||=[o(`Line Awesome`,-1)]]),_:1}),b[37]||=o(` and `,-1),t(p,{to:`https://icons.getbootstrap.com/`},{default:n(()=>[...b[28]||=[o(`Bootstrap Icons`,-1)]]),_:1}),b[38]||=o(`.`,-1)]),a(`p`,null,[b[40]||=o(`It is also possible to use your own icon files (SVG or any image format) with any Quasar component, see `,-1),t(p,{to:`/vue-components/icon#image-icons`},{default:n(()=>[...b[39]||=[o(`QIcon | Image icons`,-1)]]),_:1}),b[41]||=o(` page for more details.`,-1)]),a(`p`,null,[b[43]||=o(`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 `,-1),t(p,{to:`/vue-components/icon#custom-mapping`},{default:n(()=>[...b[42]||=[o(`QIcon | Custom mapping`,-1)]]),_:1}),b[44]||=o(` 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.`,-1)]),a(`div`,h,[b[50]||=a(`div`,{class:`doc-note__title`},`NOTE`,-1),a(`p`,null,[b[47]||=o(`Related pages: `,-1),t(p,{to:`/options/installing-icon-libraries`},{default:n(()=>[...b[45]||=[o(`Installing Icon Libraries`,-1)]]),_:1}),b[48]||=o(` and `,-1),t(p,{to:`/vue-components/icon`},{default:n(()=>[...b[46]||=[o(`QIcon component`,-1)]]),_:1}),b[49]||=o(`.`,-1)])]),t(f,{file:`IconSet`}),a(`h2`,{id:`configuring-the-default-icon-set`,class:`doc-heading doc-h2`,onClick:b[1]||=e=>r(u)(`configuring-the-default-icon-set`)},[b[51]||=o(`Configuring the default Icon Set`,-1),a(`a`,{class:`doc-heading__anchor`,href:`#configuring-the-default-icon-set`,"aria-label":`Copy anchor to Configuring the default Icon Set`,onClick:b[0]||=i(e=>r(u)(`configuring-the-default-icon-set`),[`prevent`,`stop`])})]),b[72]||=a(`p`,null,[a(`strong`,null,`There are two types of Quasar Icon Sets: webfont-based and svg-based.`)],-1),a(`p`,null,[b[53]||=o(`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 `,-1),t(p,{to:`/options/installing-icon-libraries`},{default:n(()=>[...b[52]||=[o(`Installing Icon Libraries`,-1)]]),_:1}),b[54]||=o(`).`,-1)]),a(`h3`,{id:`hardcoded`,class:`doc-heading doc-h3`,onClick:b[3]||=e=>r(u)(`hardcoded`)},[b[55]||=o(`Hardcoded`,-1),a(`a`,{class:`doc-heading__anchor`,href:`#hardcoded`,"aria-label":`Copy anchor to Hardcoded`,onClick:b[2]||=i(e=>r(u)(`hardcoded`),[`prevent`,`stop`])})]),b[73]||=a(`p`,null,`If the default Quasar Icon Set is not dynamically determined (does not depends on cookies for example), then you can:`,-1),a(`h4`,{id:`quasar-cli-way`,class:`doc-heading doc-h4`,onClick:b[5]||=e=>r(u)(`quasar-cli-way`)},[b[56]||=o(`Quasar CLI Way`,-1),a(`a`,{class:`doc-heading__anchor`,href:`#quasar-cli-way`,"aria-label":`Copy anchor to Quasar CLI Way`,onClick:b[4]||=i(e=>r(u)(`quasar-cli-way`),[`prevent`,`stop`])})]),b[74]||=a(`p`,null,[o(`We edit the `),a(`code`,{class:`doc-token`},`/quasar.config`),o(` file again:`)],-1),t(r(m),null,{default:n(()=>[t(l,{lang:`js`,code:`framework: {
2  // webfont-based example
3  iconSet: 'mdi-v7'
4}`})]),_:1}),t(r(m),null,{default:n(()=>[t(l,{lang:`js`,code:`framework: {
5  // svg-based example
6  iconSet: 'svg-mdi-v7'
7}`})]),_:1}),a(`p`,null,[b[58]||=o(`For all available options, visit the `,-1),t(p,{to:`https://github.com/quasarframework/quasar/tree/dev/ui/icon-set`},{default:n(()=>[...b[57]||=[o(`GitHub`,-1)]]),_:1}),b[59]||=o(` repository.`,-1)]),b[75]||=a(`p`,null,`Full example of including MDI & Fontawesome and telling Quasar to use Fontawesome for its components.`,-1),t(r(m),null,{default:n(()=>[t(l,{lang:`js`,code:`extras: [
8  'mdi-v7',
9  'fontawesome-v7'
10],
11framework: {
12  iconSet: 'fontawesome-v7'
13}`})]),_:1}),b[76]||=a(`p`,null,`This will enable you to use both MDI & Fontawesome webfonts in your app, and all Quasar components will display Fontawesome icons.`,-1),a(`h4`,{id:`quasar-umd-way`,class:`doc-heading doc-h4`,onClick:b[7]||=e=>r(u)(`quasar-umd-way`)},[b[60]||=o(`Quasar UMD Way`,-1),a(`a`,{class:`doc-heading__anchor`,href:`#quasar-umd-way`,"aria-label":`Copy anchor to Quasar UMD Way`,onClick:b[6]||=i(e=>r(u)(`quasar-umd-way`),[`prevent`,`stop`])})]),b[77]||=a(`p`,null,`Include the Quasar Icon Set tag for your Quasar version and also tell Quasar to use it. Example:`,-1),t(r(m),null,{default:n(()=>[t(l,{lang:`html`,code:`<!-- include this after Quasar JS tag -->
14<script src="https://cdn.jsdelivr.net/npm/quasar@v2/dist/icon-set/fontawesome-v7.umd.prod.js"><\/script>
15<script>
16  Quasar.IconSet.set(Quasar.IconSet.fontawesomeV6)
17<\/script>`})]),_:1}),a(`p`,null,[b[62]||=o(`Check what tags you need to include in your HTML files on `,-1),t(p,{to:`/start/umd`},{default:n(()=>[...b[61]||=[o(`UMD / Standalone`,-1)]]),_:1}),b[63]||=o(` page.`,-1)]),a(`h4`,{id:`quasar-vite-plugin-way`,class:`doc-heading doc-h4`,onClick:b[9]||=e=>r(u)(`quasar-vite-plugin-way`)},[b[64]||=o(`Quasar Vite Plugin Way`,-1),a(`a`,{class:`doc-heading__anchor`,href:`#quasar-vite-plugin-way`,"aria-label":`Copy anchor to Quasar Vite Plugin Way`,onClick:b[8]||=i(e=>r(u)(`quasar-vite-plugin-way`),[`prevent`,`stop`])})]),b[78]||=a(`p`,null,[o(`We edit your `),a(`code`,{class:`doc-token`},`main.js`),o(`:`)],-1),t(r(m),{title:`/main.js`},{default:n(()=>[t(l,{lang:`js`,code:`// ...
18import { Quasar } from 'quasar'
19// ...
20import iconSet from 'quasar/icon-set/fontawesome-v7'
21import '@quasar/extras/fontawesome-v7/fontawesome-v7.css'
22// ...
23app.use(Quasar, {
24  // ...,
25  iconSet: iconSet
26})`})]),_:1}),a(`h3`,{id:`dynamic-on-non-ssr-ssg`,class:`doc-heading doc-h3`,onClick:b[11]||=e=>r(u)(`dynamic-on-non-ssr-ssg`)},[b[65]||=o(`Dynamic (on non-SSR/SSG)`,-1),a(`a`,{class:`doc-heading__anchor`,href:`#dynamic-on-non-ssr-ssg`,"aria-label":`Copy anchor to Dynamic (on non-SSR/SSG)`,onClick:b[10]||=i(e=>r(u)(`dynamic-on-non-ssr-ssg`),[`prevent`,`stop`])})]),b[79]||=a(`p`,null,[o(`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: `),a(`code`,{class:`doc-token`},`quasar new boot quasar-icon-set [--format ts]`),o(`. This will create `),a(`code`,{class:`doc-token`},`/src/boot/quasar-icon-set.js`),o(` file. Edit it to:`)],-1),t(r(m),{title:`/src/boot/quasar-icon-set.js`},{default:n(()=>[t(l,{lang:`js`,code:`import { defineBoot } from '#q-app'
27import { IconSet } from 'quasar'
28
29// relative path to your node_modules/quasar/..
30// change to YOUR path
31const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.js')
32// or just a select few (example below with only mdi-v7 and fontawesome-v7):
33// import.meta.glob('../../node_modules/quasar/icon-set/{mdi-v7,fontawesome-v7}.js')
34
35export default defineBoot(async () => {
36  const iconSetName = 'mdi-v7' // ... some logic to determine it (use Cookies Plugin?)
37
38  try {
39    iconSetList[\`../../node_modules/quasar/icon-set/\${iconSetName}.js\`]().then(
40      setDefinition => {
41        IconSet.set(setDefinition.default)
42      }
43    )
44  } catch (err) {
45    console.error(err)
46    // Requested Quasar Icon Set does not exist,
47    // let's not break the app, so catching error
48  }
49})`})]),_:1}),b[80]||=a(`p`,null,[o(`Then register this boot file into the `),a(`code`,{class:`doc-token`},`/quasar.config`),o(` file:`)],-1),t(r(m),null,{default:n(()=>[t(l,{lang:`js`,code:`boot: ['quasar-icon-set']`})]),_:1}),a(`h3`,{id:`dynamic-on-ssr-ssg`,class:`doc-heading doc-h3`,onClick:b[13]||=e=>r(u)(`dynamic-on-ssr-ssg`)},[b[66]||=o(`Dynamic (on SSR/SSG)`,-1),a(`a`,{class:`doc-heading__anchor`,href:`#dynamic-on-ssr-ssg`,"aria-label":`Copy anchor to Dynamic (on SSR/SSG)`,onClick:b[12]||=i(e=>r(u)(`dynamic-on-ssr-ssg`),[`prevent`,`stop`])})]),b[81]||=a(`p`,null,[o(`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 `),a(`code`,{class:`doc-token`},`ssrContext`),o(` from your boot file:`)],-1),t(r(m),{title:`/src/boot/quasar-icon-set.js`},{default:n(()=>[t(l,{lang:`js`,code:`import { defineBoot } from '#q-app'
50import { IconSet } from 'quasar'
51
52// relative path to your node_modules/quasar/..
53// change to YOUR path
54const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.js')
55// or just a select few (example below with only mdi-v7 and fontawesome-v7):
56// import.meta.glob('../../node_modules/quasar/icon-set/{mdi-v7,fontawesome-v7}.js')
57
58// ! NOTICE ssrContext param:
59export default defineBoot(async ({ ssrContext }) => {
60  const iconSetName = 'mdi-v7' // ... some logic to determine it (use Cookies Plugin?)
61
62  try {
63    iconSetList[\`../../node_modules/quasar/icon-set/\${iconSetName}.js\`]().then(
64      setDefinition => {
65        IconSet.set(setDefinition.default, ssrContext)
66      }
67    )
68  } catch (err) {
69    console.error(err)
70    // Requested Quasar Icon Set does not exist,
71    // let's not break the app, so catching error
72  }
73})`})]),_:1}),a(`h2`,{id:`change-quasar-icon-set-at-runtime`,class:`doc-heading doc-h2`,onClick:b[15]||=e=>r(u)(`change-quasar-icon-set-at-runtime`)},[b[67]||=o(`Change Quasar Icon Set at Runtime`,-1),a(`a`,{class:`doc-heading__anchor`,href:`#change-quasar-icon-set-at-runtime`,"aria-label":`Copy anchor to Change Quasar Icon Set at Runtime`,onClick:b[14]||=i(e=>r(u)(`change-quasar-icon-set-at-runtime`),[`prevent`,`stop`])})]),a(`h3`,{id:`changing-icon-set`,class:`doc-heading doc-h3`,onClick:b[17]||=e=>r(u)(`changing-icon-set`)},[b[68]||=o(`Changing Icon Set`,-1),a(`a`,{class:`doc-heading__anchor`,href:`#changing-icon-set`,"aria-label":`Copy anchor to Changing Icon Set`,onClick:b[16]||=i(e=>r(u)(`changing-icon-set`),[`prevent`,`stop`])})]),b[82]||=a(`p`,null,`Quasar Icon Set is reactive, so all components will update properly if you change the $q.iconSet object. Here is an example:`,-1),t(r(m),{tabs:[`Composition API`,`Options API`]},{default:n(()=>[t(c,{class:`q-pa-none`,name:`Composition API`},{default:n(()=>[t(l,{lang:`js`,code:`import { useQuasar } from 'quasar'
74import mdiIconSet from 'quasar/icon-set/mdi-v7.js'
75
76setup () {
77  const $q = useQuasar()
78
79  function changeIconSetToMdiIconSet () {
80    $q.iconSet.set(mdiIconSet)
81  }
82
83  return {
84    changeIconSetToMdiIconSet
85  }
86}`})]),_:1}),t(c,{class:`q-pa-none`,name:`Options API`},{default:n(()=>[t(l,{lang:`js`,code:`import mdiIconSet from 'quasar/icon-set/mdi-v7.js'
87
88methods: {
89  changeIconSetToMdiIconSet () {
90    this.$q.iconSet.set(mdiIconSet)
91  }
92}`})]),_:1})]),_:1}),b[83]||=a(`p`,null,`If you want to do this outside of a .vue file (and you are NOT on SSR/SSG mode) then you can`,-1),t(r(m),{title:`/src/boot/some-boot-file.js`},{default:n(()=>[t(l,{lang:`js`,code:`import { defineBoot } from '#q-app'
93import { IconSet } from 'quasar'
94import mdiIconSet from 'quasar/icon-set/mdi-v7.js'
95
96export default defineBoot(() {
97  IconSet.set(mdiIconSet)
98})`})]),_:1}),a(`h3`,{id:`changing-a-specific-icon`,class:`doc-heading doc-h3`,onClick:b[19]||=e=>r(u)(`changing-a-specific-icon`)},[b[69]||=o(`Changing a Specific Icon`,-1),a(`a`,{class:`doc-heading__anchor`,href:`#changing-a-specific-icon`,"aria-label":`Copy anchor to Changing a Specific Icon`,onClick:b[18]||=i(e=>r(u)(`changing-a-specific-icon`),[`prevent`,`stop`])})]),b[84]||=a(`p`,null,`If you want to change a specific icon to another, you can. Here is an example:`,-1),t(r(m),{tabs:[`Composition API`,`Options API`]},{default:n(()=>[t(c,{class:`q-pa-none`,name:`Composition API`},{default:n(()=>[t(l,{lang:`js`,code:`import { useQuasar } from 'quasar'
99
100setup () {
101  const $q = useQuasar()
102
103  function changeQEditorHeaderIcon () {
104    $q.iconSet.editor.header1 = 'fas fa-font'
105  }
106
107  return { changeQEditorHeaderIcon }
108}`})]),_:1}),t(c,{class:`q-pa-none`,name:`Options API`},{default:n(()=>[t(l,{lang:`js`,code:`methods: {
109  changeQEditorHeaderIcon () {
110    this.$q.iconSet.editor.header1 = 'fas fa-font'
111  }
112}`})]),_:1})]),_:1}),b[85]||=a(`p`,null,`If you want to do this outside of a .vue file (and you are NOT on SSR/SSG mode) then you can`,-1),t(r(m),{title:`/src/boot/some-boot-file.js`},{default:n(()=>[t(l,{lang:`js`,code:`import { IconSet } from 'quasar'
113
114export default () {
115  IconSet.props.editor.header1 = 'fas fa-font'
116}`})]),_:1})]),_:1}))}};export{g as default};