Materialdesign: toggle-switch-* redesign and versions

[steodor]

I have:

• [x] [Searched the current library](https://materialdesignicons.com/) to make sure the icon doesn't exist.
• [x] Searched open issues to make sure there isn't a request for this icon.
• [x] Followed the material guidelines.

Hi, the current toggles are ok but just a bit small, especially the outline versions. In order to make them larger we could scale up the svg itself but in our use case we have generic behavior (i.e. any icons for on/off states) so scaling up only these quickly became a one-off hack. So we decided to make our own larger versions, which i'm sharing if you're interested in integrating into the library.

The outline versions look a bit different, in the iOS style i guess? They just look more clean to me, but i'm not sure they fit well with the other icons in the library as a whole. Please let me know if they're not desirable and i can propose plain scaled-up versions of the existing icons, no problem.

I'm including the .svgs anyway for whomever wants to use them as-is. Thanks :)

Preview

I am including the original icons (left, gray) for a quick comparison to their larger counterparts (right, blue):

Zip Download

toggle-switch-large.zip

[Xenomorph99]

Our current switch icons are similar to Microsoft's Fluent design system.

It looks like you're proposing we change them to match Apple's iOS style.

I agree that our current switches aren't the best, but I recommend we convert our icons to the Android style instead. If the "knob" and "track" are different heights, it'll be easy to distinguish between an "on" and "off" state. Unfortunately, the iOS style really needs color to work well.

https://callstack.github.io/react-native-paper/switch.html

[steodor]

Hi @Xenomorph99, thank you for your time and for enlightening me! I thought those toggles looked somewhat familiar :) and you actually gave me a good idea: how about we provide toggles in all 3 styles, MS, Android and iOS? This way people would be able to choose their favorite, or even vary depending on platform (e.g. in hybrid apps).

While i wouldn't want to impose on a default style, i do agree with your suggestion that Android would be default, since it's the main thing Material Design was made for in the first place. It just makes sense. But, for now, i just named them all after their platform:

I think they look good, but i'm a bit worried about the iOS ones: they no longer respect the Material Design guidelines (doh!) so there's the question of whether a 1dp think line would be allowed in this case. I don't know what to call it, since it's not branding, but it is a distinct style... now the MS style just seemed to fit the 2dp bill, but then again you said it yourself that the existing switches aren't the best. And if a Material Design icons pack would have toggles from other platforms than Android included, then it should allow for the styles of those respective platforms to be applied, so i think the iOS ones should be ok? I hope i'm making sense, sorry if not :)

[Xenomorph99]

My recommendation would be to rename the Android ones to toggle-switch and rename the Microsoft ones to toggle-switch-variant and not add the iOS ones. It feels like three styles would be too much.

Maybe try shrinking the Android "knobs" a little and making the "tracks" always outlined instead of filled in.

[steodor]

Sure, sounds good! I'll come back with them soon.

[steodor]

@Xenomorph99 Good call with making the circles a bit smaller for the Android toggles, this increases the length of the "track" and makes the entire icon way more clear, especially in the outlined versions! That's exactly why i left them solid initially :)
What do you think?

Here's the zip with all the above: toggle-switch.zip

[ricar2ce]

Excellent!

[steodor]

@ricar2ce Thanks!

@Xenomorph99 or @Templarian, any input on these? Thanks!

[goyney]

I personally do not like the top 4 toggles, especially the outlined version. I would be in favor of updating our current toggles to match the bottom four. I really don't think we need to offer a ton of different toggles, to be honest. These sort of toggles are typically implemented in a UI framework and are animated.

[steodor]

@goyney thanks for your feedback! Because you made several good points, i'd like to take them one at a time if you don't mind:

• I personally do not like the top 4 toggles, especially the outlined version - how do you feel about the initial versions i posted earlier, namely toggle-switch-android-outline and toggle-switch-android-off-outline, do they seem to go in a better direction?

• I would be in favor of updating our current toggles to match the bottom four - cool, vote taken i guess? :) of course they'd get renamed as you all see fit if/when they're integrated.

• I really don't think we need to offer a ton of different toggles, to be honest. - uhm, there are 2 toggles, a main and a variant... how is that "a ton", am i missing something?

• These sort of toggles are typically implemented in a UI framework and are animated. - except for the animated part, where i fully agree with you, most of the icons are typically implemented in a UI framework. Ok i'm probably exaggerating but what i mean is that if these don't belong, then so don't the checkbox, radio and all other form control-related icons since those would go in a form-builder framework. Sorry, i fail to see your reasoning here, but you gave me an idea about the animation part: what if we provided people with the tools to easily create the animation themselves?

Just a shot in the dark for starters, nothing serious, just a wild thought: similarly to other -helper icons what if we had something like a knob-helper and a track-helper and some ready-made animation code somewhere? Then a user would be able to very easily (like copy/paste) recreate the animated Android toggle while maintaining a consistent look and feel with the rest of the iconography of this package. This means users who desperately want these things animated wouldn't be forced to switch to a different library just because we don't provide that one thing. Because nobody uses 2 icon libraries in a more professional product (obviously b/c maintenance + style clash) so basically at the moment we're losing all potential users who want 1 icon animated. What if we gained those users instead? And it's not just this 1 icon, there are others like a plus icon animating into a close icon, or menu with menu-open or a variation with menu-back-burger, and possibly a lot others.

I actually see an opportunity here with the animation which, of course a lot more refined and well-defined, could be applied to a lot of the icons in this library and could really boost its usage. Sure, it's quite some work involved for the infrastructure and then of course it's a gamble if people will start using and/or contributing to it, but i personally think it has some potential. So thanks for the idea! Cheers, have a nice evening :)

[goyney]

While I'm all about bling and think making cool animations between icon is a neat idea, I really feel that's out of the scope of this icon library. Of course, we're always look for more people to help contribute first/third-party libraries that work with us. 😄

And you're right, having different variants isn't a bad thing. My issue with the top four is the track being outlined. At native size, I'm not really sure what I'm looking at. Maybe filling the track would be helpful. But even more, these types of toggles as a monochrome glyph aren't the best in terms of user experience, IMO. Checkboxes, radio buttons... Those really can stand on their own because they're one entire entity. These sliders really should be two pieces, the thumb and the track.

In terms of the helpers, we already have a few variations of a circle, but I think we might be missing a suitable track. That might also be something we could explore adding. Then, you would be free to use CSS or the Stack feature of something like @mdi/react to build up your own slider. 🤔

[steodor]

I hear you :) indeed, no need for an icons library to come bloated with animations that a lot of people wouldn't use. As far as first/third-party goes, i guess that depends on whether we'd write the animations ourselves (in which case first-party would make sense, like @mdi/animations), otherwise third-party if we were to use some other svg animations library out there (e.g. for Snap.svg there could be a mdi-snap-animations repo).

About the toggles, the ones i suggested also have other, less fortunate dimensions. So let's see them in the latest shape just with filled tracks, maybe they're a bit better?

toggle-switch-outline-filled-tracks.zip

I agree they're not as good-looking as the original toggles they're imitating, since these are flat. Ideally the circle would be filled, colored differently and have a box-shadow instead of a 2dp gap, that's the consequence of the flat style and MD guidelines which are mandatory to keep everything consistent. But maybe it's ok for them to be close enough to be recognizable, distinguishable (and i think they are but it's perhaps a matter of taste?), and they could very well be the -variant so that the primary ones are the best-looking and clear toggles.

I think it's a matter of completeness which i usually look for in such a library (i.e. each icon to have an outline equivalent), and that it's good in principle to aim for that while excepting the cases when an outline just doesn't make sense (like run). Of course, if we reach the conclusion that this is one of those cases then simply out they go :)

As for Stack yes, that would work but i wonder how many people go through the trouble of doing that (or is it just me? 🤣 ) - and here's where that first/third-party library would come in to provide ready-made stacked and animated icons.

[steodor]

Hello :) any updates, opinions or decisions on this?

[steodor]

Ok, wow, it's been 2 weeks with no activity. However i see @Templarian responding to other issues like Christmas trees, so i'm confused. I understand if many of you don't care about these icons, really, no problem, but at least tell me?

Thank you @Xenomorph99 and @goyney for your feedback and with helping me get some experience since i'm pretty new at contributing to larger projects such as this. Cheers :)

If anyone ever wants to use what's on this thread you're welcome to do so. I believe there is enough material and conversation here to take a pretty informed decision, so i don't see any reason for keeping this issue open.

[goyney]

Please don't close issues, this will be handled eventually.

We're all volunteers here and its a pretty crazy time of the year for everyone. I know @Templarian has his plate pretty full right now and I do as well as I prepare to move my family across the country in middle of a pandemic during Christmas. 😄

We'll get to it, I promise! Answering questions is sometimes quicker and easier to do than actually making the modifications and/or adding new icons.

[steodor]

Wow! There were a lot of ways in which you could have replied @goyney, just how did you think insulting me would be the best way of handling this situation? I fail to see your understanding here so, believe it or not, i actually do have more important things to do with my (also very limited, would you imagine that!) free time than to get bashed for having dared to speak up about getting ignored for weeks. Bye.

[Templarian]

@steodor Read through the issue now. Sorry you feel this way, but as said above this is a volunteer based project and around the holiday time we greatly cut back our work. Most issues now-a-days I don't have direct involvement in as the core maintainers above have everything to get an icon reviewed and into the system.

We're not doing any releases around the holiday timeframe, so even if we did address this issue it wouldn't get in until late January. This will remain open as it is a worthwhile addition/update.

Please do be respectful in your future comments. Reading the comment you replied to above there was nothing "insulting". I would not expect any member of an Open Source project to need to justify why they did not respond to an issue. Everyone here replies to the issues as they find it fun, so let's keep it that way.

[steodor]

Hi @Templarian. well i find people putting words into my mouth to be insulting, if that's wrong then sorry, my bad. I never asked for the icons to get integrated immediately, although both you and @goyney imply that i did. I don't understand why you do that. As i said, i'm pretty new at contributing to larger projects and this is valuable experience for me. Probably my expectations were unrealistic, i apologize for that. I will know better next time. Cheers.