1 files changed, 28 insertions, 3 deletions
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 0f397b59..2716d93f 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,4 +1,16 @@
 import Checkbox from '../checkbox/checkbox.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faBoxOpen,
+  faStickyNote,
+  faSmileBeam
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faBoxOpen,
+  faStickyNote,
+  faSmileBeam
+)
 
 // At widest, approximately 20 emoji are visible in a row,
 // loading 3 rows, could be overkill for narrow picker
@@ -8,7 +20,20 @@ const LOAD_EMOJI_BY = 60
 const LOAD_EMOJI_MARGIN = 64
 
 const filterByKeyword = (list, keyword = '') => {
-  return list.filter(x => x.displayText.includes(keyword))
+  if (keyword === '') return list
+
+  const keywordLowercase = keyword.toLowerCase()
+  let orderedEmojiList = []
+  for (const emoji of list) {
+    const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
+    if (indexOfKeyword > -1) {
+      if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
+        orderedEmojiList[indexOfKeyword] = []
+      }
+      orderedEmojiList[indexOfKeyword].push(emoji)
+    }
+  }
+  return orderedEmojiList.flat()
 }
 
 const EmojiPicker = {
@@ -164,13 +189,13 @@ const EmojiPicker = {
         {
           id: 'custom',
           text: this.$t('emoji.custom'),
-          icon: 'icon-smile',
+          icon: 'smile-beam',
           emojis: customEmojis
         },
         {
           id: 'standard',
           text: this.$t('emoji.unicode'),
-          icon: 'icon-picture',
+          icon: 'box-open',
           emojis: filterByKeyword(standardEmojis, this.keyword)
         }
       ]