Vuetify: [Feature Request] Checkbox: Alternative icons

[lgullestrup]

New Functionality

Allow you to select a pair of icons to switch between, instead of using the standard box and tick for checkbox (and other) selection controls.

eg. Favorites usually toggle between an outlined, and a filled star.

Improvements

allow normal use of checkbox instead of redeveloping a custom peace to use different icons as selection control.

Bugs or Edge Cases it Helps Avoid

none that i am aware of.

[Akaryatrh]

Bugs or Edge Cases it Helps Avoid

It would help people who don't use material design icons library. Currently, it's not possible to only use font-awesome icons library while checkbox icons is tied to check_box_outline_blank icon. It's even worst in case of material-design-icons library while finally we need to load duplicated icons.

EDIT: Actually my comment is not really related to this issue. I don't know if I should open a separate one?

[mascit13]

I also ran into this problem. We also only want to use font-awesome. Set fa-icon for checked and not-checked state would be very nice.

[appurist]

I've been working on this case and #2871 in a branch that I hope the team will find useful. It allows easy swapping of all Vuetify internal icons to MD, MDI or FA (font-awesome), as well as the ability to replace specific icons. See code example here and note the dropdown list at the bottom to dynamically switch icons.

Note this is not yet part of Vuetify and must be reviewed first, but I intend to submit it today. Note that it does not support the SVG version of font-awesome, but does for the CSS webfont version, and I'll be looking into that as well, because I need the SVG over JS version.

[appurist]

I believe the PR #3591 above resolves this issue and much more. Not only can you replace the checkbox icons at startup time, you can also dynamically change them at any time later, and you can also do this for any (or all) of the icons referenced internally by Vuetify. You can see checkbox toggling of Font Awesome checkboxes in the code example I provided.

For the purposes of this Issue, you could replace the checkbox icons with code like this:

Vue.use(Vuetify, {
  icons: {
    checked: 'fas fa-check-square'
    unchecked: 'far fa-square'
  }
})

To easily replace all internal (MD) icon names with icons from the FA icon sets:

Vue.use(Vuetify, { iconfont: "fa" })

This will cause Vuetify to use FA (Font-Awesome) icons.

To dynamically change these two icons dynamically later on:

this.$vuetify.icons.checked = 'fas fa-check-square'
this.$vuetify.icons.unchecked = 'far fa-square'

This would replace the checkbox icons with the nearest Font Awesome icons.

[lgullestrup]

@appurist this looks like a good solution for replacing entire icon sets with their counterparts from other libraries.
I would quiet welcome this change so that all the default icons can be updated in once spot.

But this doesn't fulfill the ability to change the icon pair of a single checkbox, or radio button.

[appurist]

But this doesn't fulfill the ability to change the icon pair of a single checkbox, or radio button.

@lgullestrup So you'd like to see something like the three icons of a checkbox specified on a per-instance basis using props?
<v-checkbox checkboxOn="fas fa-thumbs-up" checkboxOff="fas thumbs-down" checkboxIndeterminate="fas circle" label="Do this?" v-model="isChecked"></v-checkbox>

It's true that all of the components that make use of icons internally could accept a prop for each, and probably should.

Do you have a specific use for this where you'd want two or more checkboxes with _different_ icons for checked and unchecked (and indeterminate)? I've been operating under the belief that this was mostly desirable only because there wasn't a way to change them all at once (and now there is).

[johnleider]

Not a bad idea, but out of the scope of this change.

[lgullestrup]

@appurist use case is in the the main request.

My specific use case is using a checkbox to be able to toggle a favorite. (which is typically indicated by an outlined / filled star.

Other possible usecases would be indications for required binary choises. ie. Single user / Multi user, Visible / Hidden,

(this is presented in a list tile action). My current workout involved manually managing the state for each tile and changing the icon as needed.

Since the checkbox basically does this, its almost a duplication on work.

[appurist]

Understood. Yes, you're right, my recent commits and PR do not address this, they are intended more for global changes to the existing components. As John mentioned, outside the scope of my recent changes, but a good useful feature request.

So I guess this one is more specifically looking for a mechanism like props to override a specific instance of v-checkbox. Maybe something for more general use (also in other components), providing props with names such as check-icon and uncheck-icon (to match the naming style of prepend-icon and append-icon) and indeterminate-icon. These props could also be provided in v-radio-group and perhaps any others where there is a toggle feature implemented internally to Vuetify.

[jacekkarczmarczyk]

I did it (icon props for checkbox/radio) some time ago, but too late to merge it to 1.0.