feat: ion-toggle: Custom on/off icons

[NyaomiDEV]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Currently it is impossible to provide our own icons on the toggles, and this leads to problems with styled toggles as they can seem uncanny (eg. a M3 Expressive toggle using M2 icons).

I would love for the toggle to have a way for me to provide its icons.

Describe the Use Case

Toggle customization, but also some may use other kinds of icons also.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[MuhammadAbeerAkmal]

I'd like to work on this. Can you assign this to me please?

[AbdullahAhmadAAK]

Hi @NyaomiDEV , taking this issue up.

Though I've a few questions.

1 - What type of implementation are you looking for? Are we going to replace the switch (that toggles blue and grey) with custom off / on icons?
2 - Passing the checkedIcon / unCheckedIcon as props, and supporting .ico as type there would work? Or its better to go with ionicons there?

Once you confirm, I'll just implement, test and PR

[NyaomiDEV]

@AbdullahAhmadAAK I would be able to define the checked and unchecked icons, yes, using SVGs I provide (can work like other buttons, like the "icon" property of ion-back-button.)

I would like for this to be defined in the Ionic Config globally and then also per-component, as it's a global theming thing for me personally.

[AbdullahAhmadAAK]

@NyaomiDEV This is a toggle component with default icon. and we cant remove the knob from it even if we integrate custom icons. Because that knob input checkbox component.

What do you think?
Shall we replace the whole portion in red with the passed icons (checked and unchecked), but for that we've to replace the whole input component...

(the current setup can however allow icon-swap only, NOT checkbox/toggle replacement)

[NyaomiDEV]

@AbdullahAhmadAAK

https://www.beercss.com/#switches

The section "Switches with icons", the last switch. It has a X icon on disabled and a tick icon on enabled.

This is exactly what I wanted to have.

[AbdullahAhmadAAK]

Hi @NyaomiDEV, opened a PR that should resolve this. All tests are passing and the build is clean.
Would appreciate a review when you get a chance.

20260319-0207-13.4735103.mp4