Props in QCheckbox for custom icons

[dsl101]

I have a need to create a set of controls that look and behave in a very similar way, but need custom icons for checkbox-type controls, which will sit right next to a regular QCheckbox. Emulating the look and behaviour of QCheckbox from scratch isn't trivial, and it would be ideal if I were able to do something like:

<q-checkbox v-model="starred" label="Show starred items" icon-true="star" icon-false="star_border" />

I think, apart from the additional props (with perhaps icon-indet for completeness), it would only require changes in QCheckbox.js in this section of code:

const bgNode = h('div', {
  class: 'q-checkbox__bg absolute'
}, [
  h('svg', {
    class: 'q-checkbox__svg fit absolute-full',
    viewBox: '0 0 24 24',
    'aria-hidden': 'true'
  }, [
    h('path', {
      class: 'q-checkbox__truthy',
      fill: 'none',
      d: 'M1.73,12.91 8.1,19.28 22.79,4.59'
    }),

    h('path', {
      class: 'q-checkbox__indet',
      d: 'M4,14H20V10H4'
    })
  ])
])

Alternatives I've considered are building all the components from scratch using QItem or QBtn, but the behaviour and look of QCheckbox is really what I'm after.

[dsl101]

I tried hacking this into QCheckbox, and it kind of demonstrates what I'm looking for, without any of the props (it just changes all checkboxes to stars)

        h('i', {
          staticClass: 'q-icon notranslate material-icons fit absolute-full'
        }, [
          h('span', { staticClass: this.value ? 'q-checkbox__truthy' : undefined }, this.value ? 'star' : 'star_border'),
        ] )

The sizing is wrong of course too, as I guess the svg takes care of that for regular checkboxes.

[rstoenescu]

Implementing checked-icon, unchecked-icon, indeterminate-icon props for QCheckbox.
Follow: #12233

[rstoenescu]

QCheckbox & QRadio with custom icons will be available in Quasar v2.5.0.

[dsl101]

That's fantastic—many thanks for that. Any chance of a v1 backport? Unfortunately this is on a legacy project :(

[rstoenescu]

It's going to be available in v1.18 as well.