From d5471f4d371b72df0ca5fac36e698066aca3864e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 10 May 2023 18:14:21 +0200
Subject: [PATCH] fix(Toggle): wrong `icon-off` positioning

---
 docs/content/3.forms/7.toggle.md        | 15 +++++++++++++++
 src/runtime/components/forms/Toggle.vue |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/docs/content/3.forms/7.toggle.md b/docs/content/3.forms/7.toggle.md
index 71c255e1f1..4ad2f334d2 100644
--- a/docs/content/3.forms/7.toggle.md
+++ b/docs/content/3.forms/7.toggle.md
@@ -10,6 +10,21 @@ headlessui:
 ::component-card
 ::
 
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon-on` and `icon-off` props by using this pattern: `i-{collection_name}-{icon_name}`.
+
+::component-card
+---
+props:
+  iconOn: 'i-heroicons-check-20-solid'
+  iconOff: 'i-heroicons-x-mark-20-solid'
+excludedProps:
+  - iconOn
+  - iconOff
+---
+::
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index 532477bcf8..d7721e63f2 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -7,7 +7,7 @@
       <span v-if="iconOn" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
         <UIcon :name="iconOn" :class="ui.icon.on" />
       </span>
-      <span v-if="iconOff" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
+      <span v-if="iconOff" :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]" aria-hidden="true">
         <UIcon :name="iconOff" :class="ui.icon.off" />
       </span>
     </span>