[docs] Add new customized switch examples

[DanielBretzigheimer]

• I have followed (at least) the PR section of the contributing guide.

Added Android 12 switch and custom icon in thumb example to the docs
Issue: #25919
Fix #25985

Preview: https://deploy-preview-26096--material-ui.netlify.app/components/switches/#customized-switches

[mui-pr-bot]

No bundle size changes

Generated by 🚫 dangerJS against 32ff124

[mnajdova]

Looks great. A couple of suggestions on the iOS Switch.

1. we should remove the border for the unchecked version
2. we should make the background darker grey

[DanielBretzigheimer]

I will update the iOS Example as well to more closely resemble the "real" iOS switch control.

Another question: I don't know how to fix the remaining failing test. What has to be done to fix it?

[mnajdova]

I will update the iOS Example as well to more closely resemble the "real" iOS switch control.

Great!

Another question: I don't know how to fix the remaining failing test. What has to be done to fix it?

We will just approve the new screenshot in the end, no need for fixing anything :)

[oliviertassinari]

For iOS, see #25985 (comment)

[DanielBretzigheimer]

I have updated the iOS Switch including proper disabled state. What do you think?

Images:

For reference screenshots from iOS:

[mnajdova]

I have updated the iOS Switch including proper disabled state. What do you think?

Looks awesome!

[mnajdova]

Thanks @DanielBretzigheimer! It's a great first PR on Material-UI 👌

[oliviertassinari]

I have pushed the effort one step further, mainly by adding the Material-UI Switch (MUI has its own branding which is not to be confused with Material Design).

The side improvements are to order the source in the same way as the demos, and to move the margin to userland.

[oliviertassinari]

I have quite struggled to implement this. It took me more time than I had anticipated. @siriwatknp did his share too in https://mui-treasury.com/styles/switch/. @DanielBretzigheimer I wonder how we could simplify the customization of the component. A few thoughts:

• the input catches the dev tools inspector, it's such a pain. I doubt we can fully solve this. One this that would help is to flatten the structure, have the input as a direct child of the root, so we can quickly understand where we are.
• the DOM nodes are verbose, e.g. MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiSwitch-switchBase MuiSwitch-colorSecondary PrivateSwitchBase-root Mui-checked css-1eusvr7-MuiButtonBase-root-MuiIconButton-root-MuiSwitch-switchBase). It makes it hard to understand DOM structure. I think that we should at the very least drop the IconButton Can't override IconButton styles in theme without affecting Checkbox and Switch #21503.
• the style of MuiSwitch-thumb has to be moved into two different places simply to apply to leverage the check pseudo-class. Maybe it would be simpler if the thumb had its own pseudo-class. Not sure, because it's mostly disturbing by not being on the root. So I guess that if we move the pseudo-class to the root, we would be good. [Switch] ref attribute is not the root element #19613

[DanielBretzigheimer]

I fully agree with you on the input part. Clearing up the DOM Structure seems like a good Idea, using a IconButton was confusing for me.

I will have a look into it and will try to find a better solution. Should I append the changes to this PR or create another one? Also, this will certainly be a breaking change, but this seems to be okay?

[oliviertassinari]

@DanielBretzigheimer If you can explore this in another pull-request, it would be awesome. I have linked the two relevant issues in my previous comment. As for this PR, no, it's already larger than it needs to be, no more :).