Fix font icon picker

app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js

@@ -63,6 +63,13 @@ class IconPickerMenu extends React.PureComponent {
 
   setRef = c => {
     this.node = c;
+
+    if (!c) return;
+
+    // Nice and dirty hack to display the icons
+    c.querySelectorAll('button.emoji-mart-emoji > span').forEach(elem => {
+      elem.innerHTML = `<i class="fa fa-${elem.parentNode.getAttribute('title')}"></i>`;
+    });
   }
 
   getI18n = () => {
@@ -99,7 +106,6 @@ class IconPickerMenu extends React.PureComponent {
             emoticons: [],
             keywords: [name],
             imageUrl: '',
-            render: <Icon id={name} />,
           });
         }
       });

app/styles/emoji_picker.scss

@@ -1,12 +1,12 @@
 .emoji-mart {
   font-size: 13px;
   display: inline-block;
-  color: var(--primary-text-color);
 
   &,
   * {
     box-sizing: border-box;
     line-height: 1.15;
+    color: var(--primary-text-color);
   }
 
   .emoji-mart-emoji {
@@ -155,7 +155,7 @@
   }
 
   svg {
-    fill: var(--brand-color);
+    fill: var(--primary-text-color);
   }
 }
 
@@ -229,13 +229,6 @@
   padding: 0;
   font-size: 0;
 
-  .fa {
-    font-size: 18px;
-    width: 22px;
-    height: 22px;
-    text-align: center;
-  }
-
   span {
     width: 22px;
     height: 22px;
@@ -320,3 +313,34 @@
     background-repeat: no-repeat;
   }
 }
+
+.font-icon-picker {
+  .emoji-mart-search {
+    // Search doesn't work. Hide it for now.
+    display: none;
+    padding: 10px !important;
+  }
+
+  .emoji-mart-category-label > span {
+    padding: 9px 6px 5px;
+  }
+
+  .emoji-mart-scroll {
+    border-radius: 4px;
+  }
+
+  .emoji-mart-search-icon {
+    right: 18px;
+  }
+
+  .emoji-mart-bar {
+    display: none;
+  }
+
+  .fa {
+    font-size: 18px;
+    width: 22px;
+    height: 22px;
+    text-align: center;
+  }
+}

app/styles/forms.scss

@@ -520,6 +520,11 @@ code {
         border-radius: 4px;
         cursor: pointer;
         outline: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 41px;
+        box-sizing: border-box;
 
         .fa {
           font-size: 18px;