Adds documentation for the ui-switch

Author: Joe Pavitt

docs/assets/images/node-examples/ui-switch.png

@@ -5,6 +5,10 @@ props:
     Label: The text shown within the button.
     On Payload: The type & value to output in <code>msg.payload</code> when the switch is turned on.
     Off Payload: The type & value to output in <code>msg.payload</code> when the switch is turned off.
+    On Icon: If provided, this <a href="https://pictogrammers.com/library/mdi/" target="_blank">Material Design icon</a> will replace the default switch when in "on" state
+    Off Icon: If provided, this <a href="https://pictogrammers.com/library/mdi/" target="_blank">Material Design icon</a> will replace the default switch when in "off" state
+    On Color: If provided with a icons, this colour is used for the icon when in "on" state
+    Off Color: If provided with a icons, this colour is used for the icon when in "off" state
 ---
 
 <script setup>
@@ -21,4 +25,4 @@ Adds a toggle switch to the user interface.
 ## Example
 
 ![Example of a Toggle Switch](../../assets/images/node-examples/ui-switch.png "Example of a Toggle Switch"){data-zoomable}
-*Example of a rendered switch in a Dashboard.*
+*Example of rendered switches in a Dashboard.*

docs/nodes/widgets/ui-switch.md

@@ -6,16 +6,16 @@
         Each change in the state of the switch will generate
         a <code>msg.payload</code> with the specified <b>On</b> and <b>Off</b> values.
     </p>
-    <!-- <p>
-        The <b>On/Off Color</b> and <b>On/Off Icon</b> are optional fields. If they are all present, the default
-        toggle switch will be replaced with the relevant icons and their respective colors.
-    </p> -->
-    <!-- <p>
+    <p>
+        The <b>On/Off Color</b> and <b>On/Off Icon</b> are optional fields. If the icons are present, the default
+        toggle switch will be replaced with the relevant icons and their respective colors (if defined).
+    </p>
+    <p>
         The <b>On/Off Icon</b> field can be either a <a href="https://klarsys.github.io/angular-material-icons/" target="_blank">Material Design icon</a>
         <i>(e.g. 'check', 'close')</i> or a <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome icon</a>
         <i>(e.g. 'fa-fire')</i>, or a <a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md">Weather icon</a>.
         You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.
-    </p> -->
+    </p>
     <p>
         The switch state can be updated by an incoming <code>msg.payload</code>. The values must either be <code>true</code>/<code>false</code>
         or match the specified type (number, string, etc) in the node's configuration.</p>