diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js
index 54ad6d264..cf5c8f04b 100644
--- a/app/soapbox/components/autosuggest_input.js
+++ b/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 && (
+
+ )}
+
+ {item.text}
));
};
diff --git a/app/soapbox/features/compose/components/search.js b/app/soapbox/features/compose/components/search.js
index 063e3f939..f14f79a84 100644
--- a/app/soapbox/features/compose/components/search.js
+++ b/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 },
];
}
diff --git a/app/styles/autosuggest.scss b/app/styles/autosuggest.scss
index 8bf4b39dd..33a8f062d 100644
--- a/app/styles/autosuggest.scss
+++ b/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);
+ }
}