chore: chore: replace MUI icons with Lucide icons - 18

coder · BrunoQuaresma · May 21, 2025 · May 20, 2025 · May 21, 2025 · May 21, 2025
commit e40229d5b7e63bdd84a63230e013b72d4c8ca31d
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
@@ -1,9 +1,7 @@
 import type { Theme } from "@emotion/react";
 import { useTheme } from "@emotion/react";
-import AppsIcon from "@mui/icons-material/Apps";
 import CheckCircle from "@mui/icons-material/CheckCircle";
 import ErrorIcon from "@mui/icons-material/Error";
-import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
 import Warning from "@mui/icons-material/Warning";
 import CircularProgress from "@mui/material/CircularProgress";
 import type {
@@ -12,6 +10,8 @@ import type {
 	WorkspaceAgent,
 	WorkspaceApp,
 } from "api/typesGenerated";
+import { LayoutGridIcon } from "lucide-react";
+import { FileIcon } from "lucide-react";
 import { ExternalLinkIcon } from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { FC } from "react";
@@ -163,11 +163,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 +262,9 @@ const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
 					}}
 				/>
 			) : (
-				<AppsIcon
-					sx={{
-						fontSize: 14,
+				<LayoutGridIcon
+					className="size-icon-xs"
+					css={{
 						opacity: 0.7,
 					}}
 				/>

diff --git a/site/src/pages/ChatPage/ChatToolInvocation.tsx b/site/src/pages/ChatPage/ChatToolInvocation.tsx
@@ -4,7 +4,6 @@ import ArticleIcon from "@mui/icons-material/Article";
 import BuildIcon from "@mui/icons-material/Build";
 import CheckCircle from "@mui/icons-material/CheckCircle";
 import CodeIcon from "@mui/icons-material/Code";
-import DeleteIcon from "@mui/icons-material/Delete";
 import ErrorIcon from "@mui/icons-material/Error";
 import FileUploadIcon from "@mui/icons-material/FileUpload";
 import PersonIcon from "@mui/icons-material/Person";
@@ -13,6 +12,7 @@ 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 { TrashIcon } from "lucide-react";
 import { InfoIcon } from "lucide-react";
 import type React from "react";
 import { type FC, memo, useMemo, useState } from "react";
@@ -533,7 +533,7 @@ const ChatToolInvocationResultPreview: FC<{
 						color: theme.palette.text.secondary,
 					}}
 				>
-					<DeleteIcon fontSize="small" />
+					<TrashIcon className="size-icon-xs" />
 					{toolInvocation.result}
 				</div>
 			);

diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/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,6 +8,7 @@ import type {
 	HealthcheckReport,
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import { TagIcon } from "lucide-react";
 import { ChevronLeftIcon } from "lucide-react";
 import { CodeIcon } from "lucide-react";
 import type { FC } from "react";
@@ -92,7 +92,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={<TagIcon className="size-icon-sm" />}>
+								{region!.RegionID}
+							</Pill>
 						</Tooltip>
 						<Tooltip title="Region Code">
 							<Pill icon={<CodeIcon className="size-icon-sm" />}>

diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/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 { TagIcon } 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={<TagIcon className="size-icon-sm" />}>
+												{region.version}
+											</Pill>
 										</Tooltip>
 									)}
 									{region.derp_enabled && (

diff --git a/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx b/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> = {

diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/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>

diff --git a/site/src/pages/WorkspacePage/AppStatuses.tsx b/site/src/pages/WorkspacePage/AppStatuses.tsx
@@ -1,9 +1,7 @@
 import type { Theme } from "@emotion/react";
 import { useTheme } from "@emotion/react";
-import AppsIcon from "@mui/icons-material/Apps";
 import CheckCircle from "@mui/icons-material/CheckCircle";
 import ErrorIcon from "@mui/icons-material/Error";
-import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
 import Warning from "@mui/icons-material/Warning";
 import CircularProgress from "@mui/material/CircularProgress";
 import Link from "@mui/material/Link";
@@ -15,6 +13,8 @@ import type {
 	WorkspaceApp,
 } from "api/typesGenerated";
 import { formatDistance, formatDistanceToNow } from "date-fns";
+import { LayoutGridIcon } from "lucide-react";
+import { FileIcon } from "lucide-react";
 import { ExternalLinkIcon } from "lucide-react";
 import { HourglassIcon } from "lucide-react";
 import { CircleHelpIcon } from "lucide-react";
@@ -287,7 +287,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 +400,7 @@ const AppLink: FC<AppLinkProps> = ({ app, agent, workspace }) => {
 						style={{ borderRadius: "3px" }}
 					/>
 				) : (
-					<AppsIcon />
+					<LayoutGridIcon className="size-icon-xs" />
 				)}
 				{/* Keep app name short */}
 				<span