docs: Add custom icon example

Author: tjtanjin

docs/examples/custom_events.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 19
+sidebar_position: 20
 title: Custom Events
 description: custom events chatbot example
 keywords: [react, chat, chatbot, chatbotify]

docs/examples/custom_hooks.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 20
+sidebar_position: 21
 title: Custom Hooks
 description: custom hooks chatbot example
 keywords: [react, chat, chatbot, chatbotify]

docs/examples/custom_icon.md

@@ -0,0 +1,46 @@
+---
+sidebar_position: 13
+title: Custom Icon
+description: custom icon chatbot example
+keywords: [react, chat, chatbot, chatbotify]
+---
+
+# Custom Icon
+
+The following is an example for using a custom icon for audio button, as well as changing the color of the icon for the notification button. For the audio button, this example provides an **image URL** to modify it. Note that you can also import a **SVG component** directly if you wish. The benefit of importing a SVG component is that you can modify it using css e.g. `fill: "red"`. The notification button demonstrates the modification of the icon color (the library by default **imports all icons as SVG components** to ease customisations).
+
+```jsx live noInline title=MyChatBot.js
+const MyChatBot = () => {
+    const flow={
+		start: {
+			message: "Check out the audio and notification button icons!"
+		}
+	}
+	
+	const settings = {
+        audio: {
+            // can also import and use svg components directly instead of image url
+            icon: "https://cdn4.iconfinder.com/data/icons/web-ui-color/128/Audio-512.png",
+            iconDisabled: "https://cdn4.iconfinder.com/data/icons/web-ui-color/128/Audio-512.png",
+            disabled: false
+        },
+		general: {
+			embedded: true
+		},
+		chatHistory: {
+			storageKey: "example_custom_icon"
+		}
+	}
+
+    const styles = {
+        notificationIconStyle: {
+            fill: "pink"
+        }
+    }
+	return (
+		<ChatBot settings={settings} styles={styles} flow={flow}/>
+	);
+};
+
+render(<MyChatBot/>)
+```

docs/examples/markup_message.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 16
+sidebar_position: 17
 title: Markup Message
 description: markup message chatbot example
 keywords: [react, chat, chatbot, chatbotify]

docs/examples/multiple_themes.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 18
+sidebar_position: 19
 title: Multiple Themes
 description: multiple themes chatbot example
 keywords: [react, chat, chatbot, chatbotify]

docs/examples/sensitive_input.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 15
+sidebar_position: 16
 title: Sensitive Input
 description: sensitive input chatbot example
 keywords: [react, chat, chatbot, chatbotify]

docs/examples/single_theme.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 17
+sidebar_position: 18
 title: Single Theme
 description: single theme chatbot example
 keywords: [react, chat, chatbot, chatbotify]

docs/examples/smart_conversation.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 14
+sidebar_position: 15
 title: Smart Conversation
 description: smart conversation chatbot example
 keywords: [react, chat, chatbot, chatbotify]

docs/examples/smart_welcome.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 13
+sidebar_position: 14
 title: Smart Welcome
 description: smart welcome chatbot example
 keywords: [react, chat, chatbot, chatbotify]