chore: replace MUI icons with Lucide icons - update 18 (#17958)

1. PersonOutline → UserIcon
2. Apps → LayoutGridIcon
3. Delete → TrashIcon
4. InsertDriveFile → FileIcon

site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx

@@ -1,7 +1,5 @@
 import type { Theme } from "@emotion/react";
 import { useTheme } from "@emotion/react";
-import AppsIcon from "@mui/icons-material/Apps";
-import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
 import CircularProgress from "@mui/material/CircularProgress";
 import type {
 	WorkspaceAppStatus as APIWorkspaceAppStatus,
@@ -9,10 +7,14 @@ import type {
 	WorkspaceAgent,
 	WorkspaceApp,
 } from "api/typesGenerated";
-import { CircleCheckIcon } from "lucide-react";
-import { CircleAlertIcon } from "lucide-react";
-import { TriangleAlertIcon } from "lucide-react";
-import { ExternalLinkIcon } from "lucide-react";
+import {
+	CircleAlertIcon,
+	CircleCheckIcon,
+	ExternalLinkIcon,
+	FileIcon,
+	LayoutGridIcon,
+	TriangleAlertIcon,
+} from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { FC } from "react";
 
@@ -163,11 +165,11 @@ export const WorkspaceAppStatus = ({
 										...commonStyles,
 									}}
 								>
-									<InsertDriveFile
-										sx={{
-											fontSize: "11px",
+									<FileIcon
+										className="size-icon-xs"
+										css={{
 											opacity: 0.5,
-											mr: 0.25,
+											marginRight: "0.25rem",
 										}}
 									/>
 									<span>{formatURI(status.uri)}</span>
@@ -262,9 +264,9 @@ const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
 					}}
 				/>
 			) : (
-				<AppsIcon
-					sx={{
-						fontSize: 14,
+				<LayoutGridIcon
+					className="size-icon-xs"
+					css={{
 						opacity: 0.7,
 					}}
 				/>

site/src/pages/ChatPage/ChatToolInvocation.tsx

@@ -3,7 +3,6 @@ import { useTheme } from "@emotion/react";
 import ArticleIcon from "@mui/icons-material/Article";
 import BuildIcon from "@mui/icons-material/Build";
 import CodeIcon from "@mui/icons-material/Code";
-import DeleteIcon from "@mui/icons-material/Delete";
 import FileUploadIcon from "@mui/icons-material/FileUpload";
 import PersonIcon from "@mui/icons-material/Person";
 import SettingsIcon from "@mui/icons-material/Settings";
@@ -11,9 +10,12 @@ import CircularProgress from "@mui/material/CircularProgress";
 import Tooltip from "@mui/material/Tooltip";
 import type * as TypesGen from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
-import { CircleCheckIcon } from "lucide-react";
-import { CircleAlertIcon } from "lucide-react";
-import { InfoIcon } from "lucide-react";
+import {
+	CircleAlertIcon,
+	CircleCheckIcon,
+	InfoIcon,
+	TrashIcon,
+} from "lucide-react";
 import type React from "react";
 import { type FC, memo, useMemo, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -539,7 +541,7 @@ const ChatToolInvocationResultPreview: FC<{
 						color: theme.palette.text.secondary,
 					}}
 				>
-					<DeleteIcon fontSize="small" />
+					<TrashIcon className="size-icon-xs" />
 					{toolInvocation.result}
 				</div>
 			);

site/src/pages/HealthPage/DERPRegionPage.tsx

@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import TagOutlined from "@mui/icons-material/TagOutlined";
 import Tooltip from "@mui/material/Tooltip";
 import type {
 	DERPNodeReport,
@@ -9,8 +8,7 @@ import type {
 	HealthcheckReport,
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
-import { ChevronLeftIcon } from "lucide-react";
-import { CodeIcon } from "lucide-react";
+import { ChevronLeftIcon, CodeIcon, HashIcon } from "lucide-react";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { Link, useOutletContext, useParams } from "react-router-dom";
@@ -92,7 +90,9 @@ const DERPRegionPage: FC = () => {
 				<section>
 					<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
 						<Tooltip title="Region ID">
-							<Pill icon={<TagOutlined />}>{region!.RegionID}</Pill>
+							<Pill icon={<HashIcon className="size-icon-sm" />}>
+								{region!.RegionID}
+							</Pill>
 						</Tooltip>
 						<Tooltip title="Region Code">
 							<Pill icon={<CodeIcon className="size-icon-sm" />}>

site/src/pages/HealthPage/WorkspaceProxyPage.tsx

@@ -1,9 +1,9 @@
 import { useTheme } from "@emotion/react";
 import PublicOutlined from "@mui/icons-material/PublicOutlined";
-import TagOutlined from "@mui/icons-material/TagOutlined";
 import Tooltip from "@mui/material/Tooltip";
 import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import { HashIcon } from "lucide-react";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useOutletContext } from "react-router-dom";
@@ -118,7 +118,9 @@ const WorkspaceProxyPage: FC = () => {
 									)}
 									{region.version && (
 										<Tooltip title="Version">
-											<Pill icon={<TagOutlined />}>{region.version}</Pill>
+											<Pill icon={<HashIcon className="size-icon-sm" />}>
+												{region.version}
+											</Pill>
 										</Tooltip>
 									)}
 									{region.derp_enabled && (

site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx

@@ -1,4 +1,3 @@
-import UserIcon from "@mui/icons-material/PersonOutline";
 import Checkbox from "@mui/material/Checkbox";
 import Tooltip from "@mui/material/Tooltip";
 import type { SlimRole } from "api/typesGenerated";
@@ -17,6 +16,7 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
+import { UserIcon } from "lucide-react";
 import { type FC, useEffect, useState } from "react";
 
 const roleDescriptions: Record<string, string> = {
@@ -175,7 +175,7 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
 				</fieldset>
 				<div className="p-6 border-t-1 border-solid border-border text-sm">
 					<div className="flex gap-4">
-						<UserIcon className="size-icon-sm" />
+						<UserIcon />
 						<div className="flex flex-col">
 							<strong>Member</strong>
 							<span className="text-xs text-content-secondary">

site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import DeleteIcon from "@mui/icons-material/Delete";
 import GitHub from "@mui/icons-material/GitHub";
 import HideSourceOutlined from "@mui/icons-material/HideSourceOutlined";
 import KeyOutlined from "@mui/icons-material/KeyOutlined";
@@ -29,6 +28,7 @@ import {
 } from "components/TableLoader/TableLoader";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { TrashIcon } from "lucide-react";
 import { EllipsisVertical } from "lucide-react";
 import type { FC } from "react";
 import { UserRoleCell } from "../../OrganizationSettingsPage/UserTable/UserRoleCell";
@@ -236,7 +236,7 @@ export const UsersTableBody: FC<UsersTableBodyProps> = ({
 											onClick={() => onDeleteUser(user)}
 											disabled={user.id === actorID}
 										>
-											<DeleteIcon />
+											<TrashIcon className="size-icon-xs" />
 											Delete&hellip;
 										</DropdownMenuItem>
 									</DropdownMenuContent>

site/src/pages/WorkspacePage/AppStatuses.tsx

@@ -1,7 +1,5 @@
 import type { Theme } from "@emotion/react";
 import { useTheme } from "@emotion/react";
-import AppsIcon from "@mui/icons-material/Apps";
-import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
 import CircularProgress from "@mui/material/CircularProgress";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
@@ -12,12 +10,16 @@ import type {
 	WorkspaceApp,
 } from "api/typesGenerated";
 import { formatDistance, formatDistanceToNow } from "date-fns";
-import { CircleCheckIcon } from "lucide-react";
-import { CircleAlertIcon } from "lucide-react";
-import { TriangleAlertIcon } from "lucide-react";
-import { ExternalLinkIcon } from "lucide-react";
-import { HourglassIcon } from "lucide-react";
-import { CircleHelpIcon } from "lucide-react";
+import {
+	CircleAlertIcon,
+	CircleCheckIcon,
+	CircleHelpIcon,
+	ExternalLinkIcon,
+	FileIcon,
+	HourglassIcon,
+	LayoutGridIcon,
+	TriangleAlertIcon,
+} from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { FC } from "react";
 
@@ -287,7 +289,10 @@ export const AppStatuses: FC<AppStatusesProps> = ({
 														},
 													}}
 												>
-													<InsertDriveFile sx={{ mr: 0.5 }} />
+													<FileIcon
+														className="size-icon-xs"
+														style={{ marginRight: "0.5rem" }}
+													/>
 													{formatURI(status.uri)}
 												</div>
 											</Tooltip>
@@ -397,7 +402,7 @@ const AppLink: FC<AppLinkProps> = ({ app, agent, workspace }) => {
 						style={{ borderRadius: "3px" }}
 					/>
 				) : (
-					<AppsIcon />
+					<LayoutGridIcon className="size-icon-xs" />
 				)}
 				{/* Keep app name short */}
 				<span