[WEB-5708] regression: remove material icon instances from the Space app (#8353)

apps/space/core/components/issues/navbar/theme.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
 
 export const NavbarTheme = observer(function NavbarTheme() {
   // states
@@ -23,7 +24,7 @@ export const NavbarTheme = observer(function NavbarTheme() {
       onClick={handleTheme}
       className="relative grid size-7 place-items-center rounded-sm bg-layer-transparent hover:bg-layer-transparent-hover text-primary"
     >
-      <span className="material-symbols-rounded text-13">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
+      {appTheme === "light" ? <Moon className="shrink-0 size-3.5" /> : <Sun className="shrink-0 size-3.5" />}
     </button>
   );
 });

apps/space/core/components/issues/peek-overview/issue-activity.tsx

@@ -1,13 +1,12 @@
-import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { Lock } from "lucide-react";
 // plane imports
 import { Button } from "@plane/propel/button";
 // components
 import { AddComment } from "@/components/issues/peek-overview/comment/add-comment";
 import { CommentCard } from "@/components/issues/peek-overview/comment/comment-detail-card";
-import { Icon } from "@/components/ui";
 // hooks
 import { usePublish } from "@/hooks/store/publish";
 import { useIssueDetails } from "@/hooks/store/use-issue-details";
@@ -53,8 +52,8 @@ export const PeekOverviewIssueActivity = observer(function PeekOverviewIssueActi
             </>
           ) : (
             <div className="mt-4 flex items-center justify-between gap-2 rounded-sm border border-strong bg-layer-2 px-2 py-2.5">
-              <p className="flex gap-2 overflow-hidden break-words text-13 text-secondary">
-                <Icon iconName="lock" />
+              <p className="flex items-center gap-2 overflow-hidden break-words text-13 text-secondary">
+                <Lock className="shrink-0 size-3" />
                 Sign in to add your comment
               </p>
               <Link href={`/?next_path=${pathname}`}>

apps/space/core/components/issues/peek-overview/issue-properties.tsx

@@ -1,12 +1,17 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { LinkIcon } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { StatePropertyIcon, StateGroupIcon, PriorityPropertyIcon, DueDatePropertyIcon } from "@plane/propel/icons";
+import {
+  StatePropertyIcon,
+  StateGroupIcon,
+  PriorityPropertyIcon,
+  DueDatePropertyIcon,
+  PriorityIcon,
+} from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { cn, getIssuePriorityFilters } from "@plane/utils";
-// components
-import { Icon } from "@/components/ui";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
@@ -58,7 +63,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
           </h6>
           <div className="flex items-center gap-2">
             <button type="button" onClick={handleCopyLink} className="-rotate-45">
-              <Icon iconName="link" />
+              <LinkIcon className="shrink-0 size-3.5" />
             </button>
           </div>
         </div>
@@ -94,11 +99,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
                         : "border-priority-none text-priority-none"
               }`}
             >
-              {priority && (
-                <span className="-my-1 grid place-items-center">
-                  <Icon iconName={priority?.icon} />
-                </span>
-              )}
+              {priority && <PriorityIcon priority={priority?.key} size={12} className="flex-shrink-0" />}
               <span>{t(priority?.titleTranslationKey || "common.none")}</span>
             </div>
           </div>

apps/space/core/components/issues/reactions/issue-vote-reactions.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 // plane imports
@@ -108,7 +109,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             }
           )}
         >
-          <span className="material-symbols-rounded !m-0 !p-0 text-14">arrow_upward_alt</span>
+          <ArrowUp className="shrink-0 size-3.5" />
           <span className="text-13 font-regular transition-opacity ease-in-out">{allUpVotes.length}</span>
         </button>
       </Tooltip>
@@ -149,7 +150,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
             }
           )}
         >
-          <span className="material-symbols-rounded !m-0 !p-0 text-14">arrow_downward_alt</span>
+          <ArrowDown className="shrink-0 size-3.5" />
           <span className="text-13 font-regular transition-opacity ease-in-out">{allDownVotes.length}</span>
         </button>
       </Tooltip>

apps/space/core/components/ui/icon.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-
-type Props = {
-  iconName: string;
-  className?: string;
-};
-
-export function Icon({ iconName, className = "" }: Props) {
-  return <span className={`material-symbols-rounded text-13 font-light leading-5 ${className}`}>{iconName}</span>;
-}

apps/space/core/components/ui/index.ts

@@ -1 +0,0 @@
-export * from "./icon";