feat(ui): add pure CSS icons support

[stefanvanherwijnen]

What kind of change does this PR introduce?

• Bugfix
• Feature
• Documentation
• Code style update
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change?

• Yes
• No

This PR adds support for using pure CSS icons in QIcon with help of UnoCSS Icons preset.
With icons preset installed you can now do this:

QIcon Pure CSS
<q-icon size="lg" name="i-mdi-alarm"> </q-icon>
<q-icon size="lg" name="i-openmoji-party-popper" />

A prefix different than i- can be used but it will also have to be changed in the icons preset settings. You can't use a map similar to other icon sets in this case as UnoCSS tries to match <prefix><collection>-<icon> or <prefix><collection>:<icon>.

[github-actions]

UI Tests Results

    1 files     98 suites   39s ⏱️
1 031 tests 1 031 ✅ 0 💤 0 ❌
1 050 runs  1 050 ✅ 0 💤 0 ❌

Results for commit 1a0697d.

[stefanvanherwijnen]

Actually, for now the better solution is probably to use iconSet and iconMapFn:

const iconSet = {
  name: 'iconify-json-mdi',
  type: {
    positive: 'i-mdi-check-circle',
    negative: 'i-mdi-alert',
    info: 'i-mdi-information',
    warning: 'i-mdi-exclamation'
  },
  arrow: {
    up: 'i-mdi-arrow-up',
    right: 'i-mdi-arrow-right',
    down: 'i-mdi-arrow-down',
    left: 'i-mdi-arrow-left',
    dropdown: 'i-mdi-menu-down'
  },
  chevron: {
    left: 'i-mdi-chevron-left',
    right: 'i-mdi-chevron-right'
  },
  colorPicker: {
    spectrum: 'i-mdi-gradient-vertical',
    tune: 'i-mdi-tune',
    palette: 'i-mdi-palette-swatch'
  },
  pullToRefresh: {
    icon: 'i-mdi-refresh'
  },
  carousel: {
    left: 'i-mdi-chevron-left',
    right: 'i-mdi-chevron-right',
    up: 'i-mdi-chevron-up',
    down: 'i-mdi-chevron-down',
    navigationIcon: 'i-mdi-circle'
  },
  chip: {
    remove: 'i-mdi-close-circle',
    selected: 'i-mdi-check'
  },
  datetime: {
    arrowLeft: 'i-mdi-chevron-left',
    arrowRight: 'i-mdi-chevron-right',
    now: 'i-mdi-clock-outline',
    today: 'i-mdi-calendar-today'
  },
  editor: {
    bold: 'i-mdi-format-bold',
    italic: 'i-mdi-format-italic',
    strikethrough: 'i-mdi-format-strikethrough-variant',
    underline: 'i-mdi-format-underline',
    unorderedList: 'i-mdi-format-list-bulleted',
    orderedList: 'i-mdi-format-list-numbered',
    subscript: 'i-mdi-format-subscript',
    superscript: 'i-mdi-format-superscript',
    hyperlink: 'i-mdi-link',
    toggleFullscreen: 'i-mdi-fullscreen',
    quote: 'i-mdi-format-quote-close',
    left: 'i-mdi-format-align-left',
    center: 'i-mdi-format-align-center',
    right: 'i-mdi-format-align-right',
    justify: 'i-mdi-format-align-justify',
    print: 'i-mdi-printer',
    outdent: 'i-mdi-format-indent-decrease',
    indent: 'i-mdi-format-indent-increase',
    removeFormat: 'i-mdi-format-clear',
    formatting: 'i-mdi-format-color-text',
    fontSize: 'i-mdi-format-size',
    align: 'i-mdi-format-align-left',
    hr: 'i-mdi-minus',
    undo: 'i-mdi-undo',
    redo: 'i-mdi-redo',
    heading: 'i-mdi-format-size',
    heading1: 'i-mdi-format-header-1',
    heading2: 'i-mdi-format-header-2',
    heading3: 'i-mdi-format-header-3',
    heading4: 'i-mdi-format-header-4',
    heading5: 'i-mdi-format-header-5',
    heading6: 'i-mdi-format-header-6',
    code: 'i-mdi-code-tags',
    size: 'i-mdi-format-size',
    size1: 'i-mdi-numeric-1-box',
    size2: 'i-mdi-numeric-2-box',
    size3: 'i-mdi-numeric-3-box',
    size4: 'i-mdi-numeric-4-box',
    size5: 'i-mdi-numeric-5-box',
    size6: 'i-mdi-numeric-6-box',
    size7: 'i-mdi-numeric-7-box',
    font: 'i-mdi-format-font',
    viewSource: 'i-mdi-code-tags'
  },
  expansionItem: {
    icon: 'i-mdi-chevron-down',
    denseIcon: 'i-mdi-menu-down'
  },
  fab: {
    icon: 'i-mdi-plus',
    activeIcon: 'i-mdi-close'
  },
  field: {
    clear: 'i-mdi-close-circle',
    error: 'i-mdi-alert-circle'
  },
  pagination: {
    first: 'i-mdi-chevron-double-left',
    prev: 'i-mdi-chevron-left',
    next: 'i-mdi-chevron-right',
    last: 'i-mdi-chevron-double-right'
  },
  rating: {
    icon: 'i-mdi-star'
  },
  stepper: {
    done: 'i-mdi-check',
    active: 'i-mdi-pencil',
    error: 'i-mdi-alert'
  },
  tabs: {
    left: 'i-mdi-chevron-left',
    right: 'i-mdi-chevron-right',
    up: 'i-mdi-chevron-up',
    down: 'i-mdi-chevron-down'
  },
  table: {
    arrowUp: 'i-mdi-arrow-up',
    warning: 'i-mdi-alert',
    firstPage: 'i-mdi-chevron-double-left',
    prevPage: 'i-mdi-chevron-left',
    nextPage: 'i-mdi-chevron-right',
    lastPage: 'i-mdi-chevron-double-right'
  },
  tree: {
    icon: 'i-mdi-play'
  },
  uploader: {
    done: 'i-mdi-check',
    clear: 'i-mdi-close',
    add: 'i-mdi-plus-box',
    upload: 'i-mdi-cloud-upload',
    removeQueue: 'i-mdi-notification-clear-all',
    removeUploaded: 'i-mdi-check-all'
  }
}

const iconMapFn = (iconName) => ({
  cls: iconName
})
app.use(Quasar, {
  // ...,
  iconSet: iconSet,
  config: {
    iconMapFn
  }
})

However, the icons in the iconSet will have to be added to the UnoCSS safelist.
#17742

[rstoenescu]

This will go into Quasar v2.18.0.
Thanks for contributing!