Icon List for Question Box

client/talk-plugin-questionbox/QuestionBox.css

@@ -14,6 +14,15 @@
   display: flex;
 }
 
+.icon {
+  z-index: 2;
+  top: 12px;
+  left: 12px;
+  position: absolute;
+  font-size: 33px;
+  color: #262626;
+}
+
 .iconBubble{
   position: absolute;
   top: 8px;
@@ -32,7 +41,7 @@
   color: #262626;
 }
 
-.qbBox {
+.qbIconContainer {
   position: relative;
   border: 0;
   color: white;

client/talk-plugin-questionbox/QuestionBox.js

@@ -5,13 +5,20 @@ import {Icon} from 'coral-ui';
 
 import Slot from 'coral-framework/components/Slot';
 
-const QuestionBox = ({content, enable}) => (
+const QuestionBox = ({content, enable, icon = ''}) => (
   <div className={cn(styles.qbInfo, {[styles.hidden]: !enable}, 'questionbox-info')}>
-    <div className={cn(styles.qbBox, 'questionbox-box')}>
-      <Icon name="chat_bubble" className={cn(styles.iconBubble)} />
-      <Icon name="person" className={cn(styles.iconPerson)} />
-    </div>
-
+    {
+      icon === 'default' ? (
+        <div className={cn(styles.qbIconContainer)}>
+          <Icon name="chat_bubble" className={cn(styles.iconBubble)} />
+          <Icon name="person" className={cn(styles.iconPerson)} />
+        </div>
+      ) : (
+        <div className={cn(styles.qbIconContainer)}>
+          <Icon name={icon} className={cn(styles.icon)} />
+        </div>
+      )
+    }
     <div className={cn(styles.qbContent, 'questionbox-content')}>
       {content}
     </div>