Refactor #6511

packages/primevue/src/toggleswitch/ToggleSwitch.d.ts

@@ -65,10 +65,6 @@ export interface ToggleSwitchPassThroughOptions {
      * Used to pass attributes to the handle's DOM element.
      */
     handle?: ToggleSwitchPassThroughOptionType;
-    /**
-     * Used to pass attributes to the icon's DOM element.
-     */
-    icon?: ToggleSwitchPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -180,10 +176,10 @@ export interface ToggleSwitchContext {
 
 export interface ToggleSwitchSlots {
     /**
-     * Custom icon template.
-     * @param {Object} scope - icon slot's params.
+     * Custom handle template.
+     * @param {Object} scope - handle slot's params.
      */
-    icon(scope: {
+    handle(scope: {
         /**
          * Current checked state of the item as a boolean.
          */

packages/primevue/src/toggleswitch/ToggleSwitch.vue

@@ -19,21 +19,16 @@
             @change="onChange"
             v-bind="getPTOptions('input')"
         />
-        <span :class="cx('slider')" v-bind="getPTOptions('slider')">
-            <span :class="cx('handle')" v-bind="getPTOptions('handle')">
-                <slot name="icon" :checked="checked">
-                    <CheckIcon v-if="checked" :class="cx('icon')" v-bind="getPTOptions('icon')" />
-                    <TimesIcon v-else :class="cx('icon')" v-bind="getPTOptions('icon')" />
-                </slot>
-            </span>
-        </span>
+        <div :class="cx('slider')" v-bind="getPTOptions('slider')">
+            <div :class="cx('handle')" v-bind="getPTOptions('handle')">
+                <slot name="handle" :checked="checked" />
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import BaseToggleSwitch from './BaseToggleSwitch.vue';
-import TimesIcon from '@primevue/icons/times';
-import CheckIcon from '@primevue/icons/check';
 
 export default {
     name: 'ToggleSwitch',
@@ -70,10 +65,6 @@ export default {
         checked() {
             return this.modelValue === this.trueValue;
         }
-    },
-    components: {
-        CheckIcon,
-        TimesIcon
     }
 };
 </script>

packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js

@@ -121,8 +121,7 @@ const classes = {
     ],
     input: 'p-toggleswitch-input',
     slider: 'p-toggleswitch-slider',
-    handle: 'p-toggleswitch-handle',
-    icon: 'p-toggleswitch-icon'
+    handle: 'p-toggleswitch-handle'
 };
 
 export default BaseStyle.extend({