Adding emoji icon

webapp/src/components/viewTitle.scss

@@ -5,7 +5,7 @@
         }
         &.add-visible:hover {
             .Button {
-                display: block;
+                display: flex;
             }
         }
     }

webapp/src/components/viewTitle.tsx

@@ -11,6 +11,8 @@ import MenuWrapper from '../widgets/menuWrapper'
 import Editable from '../widgets/editable'
 import EmojiPicker from '../widgets/emojiPicker'
 import Button from '../widgets/buttons/button'
+import EmojiIcon from '../widgets/icons/emoji'
+import DeleteIcon from '../widgets/icons/delete'
 
 import './viewTitle.scss'
 
@@ -53,6 +55,7 @@ class ViewTitle extends React.Component<Props, State> {
                             mutator.changeIcon(board, newIcon)
                         }}
                     >
+                        <EmojiIcon/>
                         <FormattedMessage
                             id='TableComponent.add-icon'
                             defaultMessage='Add Icon'
@@ -67,17 +70,20 @@ class ViewTitle extends React.Component<Props, State> {
                             <Menu>
                                 <Menu.Text
                                     id='random'
+                                    icon={<EmojiIcon/>}
                                     name={intl.formatMessage({id: 'ViewTitle.random-icon', defaultMessage: 'Random'})}
                                     onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}
                                 />
                                 <Menu.SubMenu
                                     id='pick'
+                                    icon={<EmojiIcon/>}
                                     name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick Icon'})}
                                 >
                                     <EmojiPicker onSelect={this.onSelectEmoji}/>
                                 </Menu.SubMenu>
                                 <Menu.Text
                                     id='remove'
+                                    icon={<DeleteIcon/>}
                                     name={intl.formatMessage({id: 'ViewTitle.remove-icon', defaultMessage: 'Remove Icon'})}
                                     onClick={() => mutator.changeIcon(board, undefined, 'remove icon')}
                                 />

webapp/src/widgets/buttons/button.scss

@@ -1,4 +1,6 @@
 .Button {
+    display: flex;
+    align-items: center;
 	text-align: center;
 	border-radius: 5px;
 	padding: 0 5px;
@@ -14,4 +16,10 @@
 	.octo-hovercontrol {
 		background: rgb(239, 239, 238);
 	}
+    
+    .Icon {
+        width: 14px;
+        height: 14px;
+        margin-right: 5px;
+    }
 }

webapp/src/widgets/icons/emoji.scss

@@ -0,0 +1,6 @@
+.EmojiIcon {
+    fill: rgba(var(--main-fg), 0.7);
+    stroke: none;
+	width: 24px;
+	height: 24px;
+}

webapp/src/widgets/icons/emoji.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+
+import './emoji.scss'
+
+export default function EmojiIcon(): JSX.Element {
+    return (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            className='EmojiIcon Icon'
+            viewBox='0 0 496 512'
+        >
+            <path
+                d='M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z'
+            />
+        </svg>
+    )
+}