feat: Unified icon picker (#7038)

app/scenes/Document/components/ReferenceListItem.tsx

@@ -4,10 +4,11 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import { s, ellipsis } from "@shared/styles";
-import { NavigationNode } from "@shared/types";
+import { IconType, NavigationNode } from "@shared/types";
+import { determineIconType } from "@shared/utils/icon";
 import Document from "~/models/Document";
 import Flex from "~/components/Flex";
-import EmojiIcon from "~/components/Icons/EmojiIcon";
+import Icon from "~/components/Icon";
 import { hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
@@ -58,7 +59,8 @@ function ReferenceListItem({
   shareId,
   ...rest
 }: Props) {
-  const { emoji } = document;
+  const { icon, color } = document;
+  const isEmoji = determineIconType(icon) === IconType.Emoji;
 
   return (
     <DocumentLink
@@ -74,9 +76,13 @@ function ReferenceListItem({
       {...rest}
     >
       <Content gap={4} dir="auto">
-        {emoji ? <EmojiIcon emoji={emoji} /> : <DocumentIcon />}
+        {icon ? (
+          <Icon value={icon} color={color ?? undefined} />
+        ) : (
+          <DocumentIcon />
+        )}
         <Title>
-          {emoji ? document.title.replace(emoji, "") : document.title}
+          {isEmoji ? document.title.replace(icon!, "") : document.title}
         </Title>
       </Content>
     </DocumentLink>