Other icons for switches

[Dorian-Grim]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

• Add the ability to change icons on switches without using custom css, dirrectly from HTML either through class or with attributes, data-toggle-on="" data-toggle-off="". Currently we only have
  

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

with no other possible way of editing, except custom css. At least as I currently understand it

Motivation and context

• there are scenarios where I need other icons for my toggles

[julien-deramond]

Thanks for opening this issue @Dorian-Grim
Could you please share maybe a screenshot of the toggles you'd like to use? Just out of curiosity to see if some things could be integrated into ODS, or are maybe missing.

[julien-deramond]

dirrectly from HTML either through class or with attributes, data-toggle-on="" data-toggle-off=""

We won't add any data-bs-toggle-{on|off} to this component because it would mean adding some JavaScript for a basic HTML component.

I've tested some things quickly, and changing the icons can be done directly in the HTML through CSS variables as shown in https://stackblitz.com/edit/xqddyb?file=index.html.
Note that they can be changed inline with the style="" attribute too when added for the <input> HTML element.

[Dorian-Grim]

dirrectly from HTML either through class or with attributes, data-toggle-on="" data-toggle-off=""

We won't add any data-bs-toggle-{on|off} to this component because it would mean adding some JavaScript for a basic HTML component.

I've tested some things quickly, and changing the icons can be done directly in the HTML through CSS variables as shown in https://stackblitz.com/edit/xqddyb?file=index.html. Note that they can be changed inline with the style="" attribute too when added for the <input> HTML element.

I get your point. Works like this, I knew obv. But specifically this I am trying to avoid.

I don't mind if you close this as is, your decision.

[github-actions]

As the issue was labeled with awaiting-reply, but there has been no response in 14 days, this issue will be closed. If you have any questions, you can comment/reply.