AutosuggestInput: add icon to menu

app/soapbox/components/autosuggest_input.js

@@ -7,6 +7,7 @@ import { isRtl } from '../rtl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import classNames from 'classnames';
 import { List as ImmutableList } from 'immutable';
+import Icon from 'soapbox/components/icon';
 
 const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
   let word;
@@ -231,7 +232,11 @@ export default class AutosuggestInput extends ImmutablePureComponent {
         onMouseDown={this.handleMenuItemClick(item)}
         key={i}
       >
-        {item.text}
+        {item.icon && (
+          <Icon src={item.icon} />
+        )}
+
+        <span>{item.text}</span>
       </a>
     ));
   };

app/soapbox/features/compose/components/search.js

@@ -90,7 +90,7 @@ class Search extends React.PureComponent {
     const { intl, value } = this.props;
 
     return [
-      { text: intl.formatMessage(messages.action, { query: value }), action: this.handleSubmit },
+      { text: intl.formatMessage(messages.action, { query: value }), icon: require('@tabler/icons/icons/search.svg'), action: this.handleSubmit },
     ];
   }
 

app/styles/autosuggest.scss

@@ -104,7 +104,8 @@
 }
 
 .autosuggest-input__action {
-  display: block;
+  display: flex;
+  align-items: center;
   padding: 10px;
   border-radius: 4px;
   font-weight: bold;
@@ -115,4 +116,9 @@
   &.selected {
     background-color: var(--brand-color--med);
   }
+
+  .svg-icon {
+    margin-right: 8px;
+    transform: translateY(-1px);
+  }
 }