Create component to display input with an icon

src/utils/IconInput.scss

@@ -0,0 +1,26 @@
+@import './mixins/vertical-align';
+@import './base';
+
+.icon-input-container {
+  position: relative;
+}
+
+.icon-input-container__input {
+  padding-right: 35px !important;
+}
+
+.icon-input-container__input:not(:disabled) {
+  background-color: var(--primary-color) !important;
+}
+
+.card .icon-input-container__input:not(:disabled),
+.dropdown .icon-input-container__input:not(:disabled) {
+  background-color: var(--input-color) !important;
+}
+
+.icon-input-container__icon {
+  @include vertical-align();
+
+  right: .75rem;
+  cursor: pointer;
+}

src/utils/IconInput.tsx

@@ -0,0 +1,27 @@
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import { useRef } from 'react';
+import type { InputProps } from 'reactstrap';
+import { Input } from 'reactstrap';
+import './IconInput.scss';
+
+type IconInputProps = InputProps & { icon: IconProp };
+
+export const IconInput: FC<IconInputProps> = ({ icon, className, ...rest }) => {
+  const ref = useRef<{ input: HTMLInputElement }>();
+  const classes = classNames('icon-input-container__input', className);
+
+  return (
+    <div className="icon-input-container">
+      <Input className={classes} {...rest} />
+      <FontAwesomeIcon
+        icon={icon}
+        fixedWidth
+        className="icon-input-container__icon"
+        onClick={() => ref.current?.input.focus()}
+      />
+    </div>
+  );
+};