chore: replace MUI icons - 1 (#17731)

1. Replaced MUI StopOutlined with Lucide SquareIcon in: - workspace.tsx - WorkspacesPageView.tsx - BuildIcon.tsx 2. Replaced MUI PlayArrowOutlined with Lucide PlayIcon in: - workspace.tsx - WorkspacesPageView.tsx - BuildIcon.tsx 3. Replaced MUI DeleteOutlined with Lucide TrashIcon in: - WorkspacesPageView.tsx - WorkspaceActions.tsx - TemplatePageHeader.tsx - BuildIcon.tsx
coder · matifali · May 22, 2025 · May 2, 2025 · May 8, 2025 · May 8, 2025
commit 2a9608c19f26df1a35dfeb9b5481ec8ef63f5832
diff --git a/site/src/components/BuildIcon/BuildIcon.tsx b/site/src/components/BuildIcon/BuildIcon.tsx
@@ -1,17 +1,15 @@
-import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
-import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined";
-import StopOutlined from "@mui/icons-material/StopOutlined";
 import type { WorkspaceTransition } from "api/typesGenerated";
+import { PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
 import type { ComponentProps } from "react";
 
-type SVGIcon = typeof PlayArrowOutlined;
+type SVGIcon = typeof PlayIcon;
 
 type SVGIconProps = ComponentProps<SVGIcon>;
 
 const iconByTransition: Record<WorkspaceTransition, SVGIcon> = {
-	start: PlayArrowOutlined,
-	stop: StopOutlined,
-	delete: DeleteOutlined,
+	start: PlayIcon,
+	stop: SquareIcon,
+	delete: TrashIcon,
 };
 
 export const BuildIcon = (

diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
@@ -1,5 +1,4 @@
 import AddIcon from "@mui/icons-material/AddOutlined";
-import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import EditIcon from "@mui/icons-material/EditOutlined";
 import CopyIcon from "@mui/icons-material/FileCopyOutlined";
 import SettingsIcon from "@mui/icons-material/SettingsOutlined";
@@ -30,6 +29,7 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { TrashIcon } from "lucide-react";
 import { EllipsisVertical } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import type { WorkspacePermissions } from "modules/permissions/workspaces";
@@ -105,7 +105,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
 						className="text-content-destructive focus:text-content-destructive"
 						onClick={dialogState.openDeleteConfirmation}
 					>
-						<DeleteIcon />
+						<TrashIcon />
 						Delete&hellip;
 					</DropdownMenuItem>
 				</DropdownMenuContent>

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -1,4 +1,3 @@
-import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import DownloadOutlined from "@mui/icons-material/DownloadOutlined";
 import DuplicateIcon from "@mui/icons-material/FileCopyOutlined";
 import HistoryIcon from "@mui/icons-material/HistoryOutlined";
@@ -13,6 +12,7 @@ import {
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import { useAuthenticated } from "hooks/useAuthenticated";
+import { TrashIcon } from "lucide-react";
 import { EllipsisVertical } from "lucide-react";
 import {
 	type ActionType,
@@ -227,7 +227,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
 						onClick={handleDelete}
 						data-testid="delete-button"
 					>
-						<DeleteIcon />
+						<TrashIcon />
 						Delete&hellip;
 					</DropdownMenuItem>
 				</DropdownMenuContent>

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -1,8 +1,5 @@
 import CloudQueue from "@mui/icons-material/CloudQueue";
-import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
 import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined";
-import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined";
-import StopOutlined from "@mui/icons-material/StopOutlined";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, Workspace } from "api/typesGenerated";
@@ -22,6 +19,7 @@ import { PaginationHeader } from "components/PaginationWidget/PaginationHeader";
 import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase";
 import { Stack } from "components/Stack/Stack";
 import { TableToolbar } from "components/TableToolbar/TableToolbar";
+import { PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
 import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
 import type { FC } from "react";
 import type { UseQueryResult } from "react-query";
@@ -160,7 +158,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 									}
 									onClick={onStartAll}
 								>
-									<PlayArrowOutlined /> Start
+									<PlayIcon /> Start
 								</DropdownMenuItem>
 								<DropdownMenuItem
 									disabled={
@@ -170,7 +168,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 									}
 									onClick={onStopAll}
 								>
-									<StopOutlined /> Stop
+									<SquareIcon /> Stop
 								</DropdownMenuItem>
 								<DropdownMenuSeparator />
 								<DropdownMenuItem onClick={onUpdateAll}>
@@ -180,7 +178,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 									className="text-content-destructive focus:text-content-destructive"
 									onClick={onDeleteAll}
 								>
-									<DeleteOutlined /> Delete&hellip;
+									<TrashIcon /> Delete&hellip;
 								</DropdownMenuItem>
 							</DropdownMenuContent>
 						</DropdownMenu>

diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx
@@ -1,14 +1,13 @@
 import type { Theme } from "@emotion/react";
 import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import QueuedIcon from "@mui/icons-material/HourglassEmpty";
-import PlayIcon from "@mui/icons-material/PlayArrowOutlined";
-import StopIcon from "@mui/icons-material/StopOutlined";
 import type * as TypesGen from "api/typesGenerated";
 import { PillSpinner } from "components/Pill/Pill";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import minMax from "dayjs/plugin/minMax";
 import utc from "dayjs/plugin/utc";
+import { PlayIcon, SquareIcon } from "lucide-react";
 import semver from "semver";
 import { getPendingStatusLabel } from "./provisionerJob";
 
@@ -215,7 +214,7 @@ export const getDisplayWorkspaceStatus = (
 			return {
 				type: "inactive",
 				text: "Stopped",
-				icon: <StopIcon />,
+				icon: <SquareIcon />,
 			} as const;
 		case "deleting":
 			return {