refactor ToggleButton prop description + story

Author: Lukas742

packages/main/src/webComponents/ToggleButton/ToggleButton.stories.mdx

@@ -0,0 +1,52 @@
+import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs/blocks';
+import {ToggleButton} from '@ui5/webcomponents-react/lib/ToggleButton';
+import {ButtonDesign} from '@ui5/webcomponents-react/lib/ButtonDesign';
+import '@ui5/webcomponents-icons/dist/icons/employee.js';
+import {CSSProperties} from 'react';
+
+import {createSelectArgTypes} from '@shared/stories/createSelectArgTypes';
+import {DocsHeader} from '@shared/stories/DocsHeader';
+
+<Meta
+    title="UI5 Web Components / ToggleButton"
+    component={ToggleButton}
+    argTypes={{
+        ...createSelectArgTypes({design: ButtonDesign}),
+        children: {control: 'text'},
+        slot: {control: {disable: true}},
+        ref: {control: {disable: true}},
+        style: {
+            type: CSSProperties,
+            description:
+                'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
+        },
+        className: {
+            type: 'string',
+            description:
+                'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
+        },
+        tooltip: {type: 'string', description: 'A tooltip which will be shown on hover'}
+    }}
+    args={{
+        design: ButtonDesign.Default,
+        icon: 'employee',
+        children: 'ToggleButton Text',
+        style: {},
+        className: '',
+        tooltip: '',
+        slot: '',
+        ref: null
+    }}
+/>
+
+<DocsHeader/>
+
+<Canvas>
+    <Story name="Default">
+        {(args) => {
+            return <ToggleButton {...args} />;
+        }}
+    </Story>
+</Canvas>
+
+<ArgsTable story="."/>

packages/main/src/webComponents/ToggleButton/ToggleButton.stories.tsx

@@ -17,7 +17,9 @@ export interface ToggleButtonPropTypes extends Omit<WithWebComponentPropTypes, '
    */
   disabled?: boolean;
   /**
-   * Defines the icon to be displayed as graphical element within the <code>Button</code>. The SAP-icons font provides numerous options. <br><br> Example: <br> <pre>ui5-button icon="palette"</pre><br/><br/>
+   * Defines the icon to be displayed as graphical element within the <code>Button</code>. The SAP-icons font provides numerous options.
+   *
+   * <b>Note:</b> You should import the desired icon first, then use its name as "icon".<br><code>import "@ui5/webcomponents-icons/dist/icons/{icon_name}.js"</code>
    *
    * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
    */