q-checkbox custom icons removed?

[rusia]

I can see that in v1.beta there is no support anymore for q-checkbox checked-icon and unchecked-icon props as it was in v0.17
Are they removed forever?
This feature is indispensable for my app. Can you suggest some workaround?

[s.molinari]

Can you give an example or two of how it is indispensable?

Scott

[rusia]

I’m building something like a multi-track music editor. I use check-boxes with custom icons for triggering mute and solo states for tracks.
In v0.17 it looked nice:

Now in v1.beta it’s just horrible:

Of course, I believe it’s possible to create a workaround for this using q-btn instead of q-checkbox. But it would be just a workaround with a lot of extra unnecessary code. With checkboxes it’s a very short and comfortable code:

<div v-for="(track, index) in tracks" :key="index">
  <div>
    <q-checkbox v-model="trackUnmuted[index]" checked-icon="volume_mute" unchecked-icon="volume_off" @input="mute(index, $event)"/>
  </div>
  <div>
    <q-checkbox v-model="trackSolo[index]" checked-icon="strikethrough_s" unchecked-icon="strikethrough_s" @input="solo(index, $event)"/>
  </div>
</div>

I really have no idea why you decided to drop this feature. It is very useful and convenient. So if possible please re-enable it again.

[s.molinari]

Ok. I see what you mean now and thank you for the explanation.

I can suggest a few things.

1. Create an issue on Github asking for this feature again.

2. Create your own toggle button component with a button, as you mentioned. You only need to create the component once and it really isn’t that hard. Then you can use your custom toggle button component wherever you need it.

3. Have a look at QBtnToggle. Since you are given an array prop for the button definitions, that might be an easier way to create your custom toggle button(s).

Scott

[rusia]

Thanks for your response.
I created an issue linking to this topic.
To create a custom toggle button component is a good idea, I’ll consider this. I also thought of using some css trick like that: https://codepen.io/imohkay/pen/wyxuB
But, of course, I’d prefer this feature to be re-enabled in quasar. That would be the best option
By the way, do you have any idea why it was dropped? Nobody used it? Or any other reason?

[s.molinari]

Nope. No idea what happened to that feature of the toggle.

Scott

[s.molinari]

4. suggestion, as Razvan said on Github, use QToggle.

Scott

[rusia]

Yes, Razvan said that in order for an accurate Material Design on checkboxes, this feature had to be dropped, and suggested using QToggle with icons.
I tried QToggle and it worked but the look of it didn’t satisfy me.
So I finally decided to create a workaround.
I used plain html <input type="checkbox"/> and styled it with FontAwesome icons as shown in this codepen https://codepen.io/imohkay/pen/wyxuB
Now it looks and works just like q-checkbox with custom icons in quasar v0.17
Anyway, thanks for you help, it is much appreciated!

[s.molinari]

I played around some with QToggleButton.

https://codepen.io/smolinari/pen/jJEBVe

Scott

[rusia]

Your example looks cool!
However QBtnToggle is essentially a radio input but I need a checkbox style on/off boolean switch. That’s why I decided to use plain html input tag instead of Quasar element.

[s.molinari]

Well, you can control what you’d like with it and change the icons with a function, theoretically.

Scott

[uberpu]

I’m using the QChip… (plus it has a “selected” option built in.
I know this example could be simpler, but hey, It got changed into a mini component.
Handles bind, plus horizontal, plus option or checkbox option.
https://codepen.io/uberpu/pen/QoNQXz

[turigeza]

I was also using this option with q-radio and sad to see it go.

[s.molinari]

You can still do it. You have now the power to do anything you want with the option slot.

https://v1.quasar-framework.org/vue-components/select#Customizing-menu-options

Scott

[mitchellmonaghan]

I also used this for like/dislike buttons and a heart favorite button. I agree sad to see this convenience go

[mitchellmonaghan]

my solution is simple

<q-btn v-if="userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite" />
<q-btn v-if="!userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite_border" />

[metalsadman]

@mitchellmonaghan said in q-checkbox custom icons removed?:

my solution is simple

<q-btn v-if="userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite" />
<q-btn v-if="!userFavorited" @click="setFavorite" flat round color="white" text-color="red" icon="favorite_border" />

You can do a one liner with that ie.
... :icon="userFavorited ? 'favorite' : 'favorite_border'" ... or use a computed prop.

[Hawkeye64]

If using a button, add the flat property for better results