From 257500c12f492058e15a3a878f2d05fee6698ac8 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 15 May 2025 12:08:35 -0300
Subject: [PATCH] chore: replace MUI icons with Lucide icons - 14 (#17832)

HourglassEmpty -> HourglassIcon
Star -> StarIcon
CloudQueue -> CloudIcon
InstallDesktop -> MonitorDownIcon
WarningRounded -> TriangleAlertIcon
ArrowBackOutlined -> ChevronLeftIcon
MonetizationOnOutlined -> CircleDollarSign
---
 .../Navbar/UserDropdown/UserDropdownContent.tsx    |  4 ++--
 site/src/modules/resources/AgentStatus.tsx         | 14 +++++++-------
 site/src/pages/HealthPage/DERPRegionPage.tsx       |  7 ++++---
 .../TemplateVersionEditor.tsx                      |  4 ++--
 .../TemplateVersionStatusBadge.tsx                 |  4 ++--
 site/src/pages/WorkspacePage/AppStatuses.tsx       |  4 ++--
 .../WorkspaceNotifications.tsx                     |  4 ++--
 site/src/pages/WorkspacePage/WorkspaceTopbar.tsx   | 11 +++++++----
 .../WorkspacesPage/BatchUpdateConfirmation.tsx     |  4 ++--
 .../pages/WorkspacesPage/WorkspacesPageView.tsx    |  4 ++--
 site/src/pages/WorkspacesPage/WorkspacesTable.tsx  |  6 ++++--
 site/src/utils/workspace.tsx                       |  4 ++--
 12 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
index 13ee16076d..f0f9e257a0 100644
--- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
+++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
@@ -8,7 +8,6 @@ import AccountIcon from "@mui/icons-material/AccountCircleOutlined";
 import BugIcon from "@mui/icons-material/BugReportOutlined";
 import ChatIcon from "@mui/icons-material/ChatOutlined";
 import LogoutIcon from "@mui/icons-material/ExitToAppOutlined";
-import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
 import LaunchIcon from "@mui/icons-material/LaunchOutlined";
 import DocsIcon from "@mui/icons-material/MenuBook";
 import Divider from "@mui/material/Divider";
@@ -20,6 +19,7 @@ import { CopyButton } from "components/CopyButton/CopyButton";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Stack } from "components/Stack/Stack";
 import { usePopover } from "components/deprecated/Popover/Popover";
+import { MonitorDownIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link } from "react-router-dom";
 
@@ -79,7 +79,7 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
 
 			<Link to="/install" css={styles.link}>
 				<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
-					<InstallDesktopIcon css={styles.menuItemIcon} />
+					<MonitorDownIcon css={styles.menuItemIcon} />
 					<span css={styles.menuItemText}>Install CLI</span>
 				</MenuItem>
 			</Link>
diff --git a/site/src/modules/resources/AgentStatus.tsx b/site/src/modules/resources/AgentStatus.tsx
index 88c127c58b..2f80ab5dab 100644
--- a/site/src/modules/resources/AgentStatus.tsx
+++ b/site/src/modules/resources/AgentStatus.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import WarningRounded from "@mui/icons-material/WarningRounded";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import type { WorkspaceAgent } from "api/typesGenerated";
@@ -11,9 +10,10 @@ import {
 	HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
 import { PopoverTrigger } from "components/deprecated/Popover/Popover";
+import { TriangleAlertIcon } from "lucide-react";
 import type { FC } from "react";
 
-// If we think in the agent status and lifecycle into a single enum/state I’d
+// If we think in the agent status and lifecycle into a single enum/state I'd
 // say we would have: connecting, timeout, disconnected, connected:created,
 // connected:starting, connected:start_timeout, connected:start_error,
 // connected:ready, connected:shutting_down, connected:shutdown_timeout,
@@ -50,7 +50,7 @@ const StartTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
 	return (
 		<HelpTooltip>
 			<PopoverTrigger role="status" aria-label="Agent timeout">
-				<WarningRounded css={styles.timeoutWarning} />
+				<TriangleAlertIcon css={styles.timeoutWarning} />
 			</PopoverTrigger>
 
 			<HelpTooltipContent>
@@ -75,7 +75,7 @@ const StartErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
 	return (
 		<HelpTooltip>
 			<PopoverTrigger role="status" aria-label="Start error">
-				<WarningRounded css={styles.errorWarning} />
+				<TriangleAlertIcon css={styles.errorWarning} />
 			</PopoverTrigger>
 			<HelpTooltipContent>
 				<HelpTooltipTitle>Error starting the agent</HelpTooltipTitle>
@@ -111,7 +111,7 @@ const ShutdownTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
 	return (
 		<HelpTooltip>
 			<PopoverTrigger role="status" aria-label="Stop timeout">
-				<WarningRounded css={styles.timeoutWarning} />
+				<TriangleAlertIcon css={styles.timeoutWarning} />
 			</PopoverTrigger>
 			<HelpTooltipContent>
 				<HelpTooltipTitle>Agent is taking too long to stop</HelpTooltipTitle>
@@ -135,7 +135,7 @@ const ShutdownErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
 	return (
 		<HelpTooltip>
 			<PopoverTrigger role="status" aria-label="Stop error">
-				<WarningRounded css={styles.errorWarning} />
+				<TriangleAlertIcon css={styles.errorWarning} />
 			</PopoverTrigger>
 			<HelpTooltipContent>
 				<HelpTooltipTitle>Error stopping the agent</HelpTooltipTitle>
@@ -231,7 +231,7 @@ const TimeoutStatus: FC<AgentStatusProps> = ({ agent }) => {
 	return (
 		<HelpTooltip>
 			<PopoverTrigger role="status" aria-label="Timeout">
-				<WarningRounded css={styles.timeoutWarning} />
+				<TriangleAlertIcon css={styles.timeoutWarning} />
 			</PopoverTrigger>
 			<HelpTooltipContent>
 				<HelpTooltipTitle>Agent is taking too long to connect</HelpTooltipTitle>
diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index a32350e7af..5bb190fd1e 100644
--- 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 ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
 import TagOutlined from "@mui/icons-material/TagOutlined";
 import Tooltip from "@mui/material/Tooltip";
 import type {
@@ -10,6 +9,7 @@ import type {
 	HealthcheckReport,
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import { ChevronLeftIcon } from "lucide-react";
 import { CodeIcon } from "lucide-react";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
@@ -63,8 +63,9 @@ const DERPRegionPage: FC = () => {
 						}}
 						to="/health/derp"
 					>
-						<ArrowBackOutlined
-							css={{ fontSize: 12, verticalAlign: "middle", marginRight: 8 }}
+						<ChevronLeftIcon
+							className="size-icon-xs"
+							css={{ verticalAlign: "middle", marginRight: 8 }}
 						/>
 						Back to DERP
 					</Link>
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 7d8a3c3651..03dd9d4723 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
 import WarningOutlined from "@mui/icons-material/WarningOutlined";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
@@ -25,6 +24,7 @@ import {
 } from "components/FullPageLayout/Topbar";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
+import { ChevronLeftIcon } from "lucide-react";
 import { PlayIcon, PlusIcon, XIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
@@ -217,7 +217,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					<div>
 						<Tooltip title="Back to the template">
 							<TopbarIconButton component={RouterLink} to={templateLink}>
-								<ArrowBackOutlined />
+								<ChevronLeftIcon className="size-icon-sm" />
 							</TopbarIconButton>
 						</Tooltip>
 					</div>
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
index ac91c470fd..bdafbd115a 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
@@ -1,6 +1,6 @@
-import QueuedIcon from "@mui/icons-material/HourglassEmpty";
 import type { TemplateVersion } from "api/typesGenerated";
 import { Pill, PillSpinner } from "components/Pill/Pill";
+import { HourglassIcon } from "lucide-react";
 import { CheckIcon, CircleAlertIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import type { ThemeRole } from "theme/roles";
@@ -44,7 +44,7 @@ const getStatus = (
 			return {
 				type: "active",
 				text: getPendingStatusLabel(version.job),
-				icon: <QueuedIcon />,
+				icon: <HourglassIcon className="size-icon-sm" />,
 			};
 		case "canceling":
 			return {
diff --git a/site/src/pages/WorkspacePage/AppStatuses.tsx b/site/src/pages/WorkspacePage/AppStatuses.tsx
index 9d8b8ed475..fe1df6863b 100644
--- a/site/src/pages/WorkspacePage/AppStatuses.tsx
+++ b/site/src/pages/WorkspacePage/AppStatuses.tsx
@@ -3,7 +3,6 @@ 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 HourglassEmpty from "@mui/icons-material/HourglassEmpty";
 import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
 import OpenInNew from "@mui/icons-material/OpenInNew";
 import Warning from "@mui/icons-material/Warning";
@@ -17,6 +16,7 @@ import type {
 	WorkspaceApp,
 } from "api/typesGenerated";
 import { formatDistance, formatDistanceToNow } from "date-fns";
+import { HourglassIcon } from "lucide-react";
 import { CircleHelpIcon } from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { FC } from "react";
@@ -57,7 +57,7 @@ const getStatusIcon = (
 			return isLatest ? (
 				<CircularProgress size={18} sx={{ color }} />
 			) : (
-				<HourglassEmpty sx={{ color, fontSize: 18 }} />
+				<HourglassIcon className="size-icon-sm" style={{ color }} />
 			);
 		default:
 			return <Warning sx={{ color, fontSize: 18 }} />;
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
index 976e7bac4f..53764f7afe 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import WarningRounded from "@mui/icons-material/WarningRounded";
 import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
 import type {
 	Template,
@@ -10,6 +9,7 @@ import type {
 import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import dayjs from "dayjs";
+import { TriangleAlertIcon } from "lucide-react";
 import { InfoIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
@@ -259,7 +259,7 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
 				<Notifications
 					items={warningNotifications}
 					severity="warning"
-					icon={<WarningRounded />}
+					icon={<TriangleAlertIcon className="size-icon-sm" />}
 				/>
 			)}
 		</div>
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
index 8f75e61589..5c4f3f99b7 100644
--- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -1,6 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
-import QuotaIcon from "@mui/icons-material/MonetizationOnOutlined";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import { workspaceQuota } from "api/queries/workspaceQuota";
@@ -17,6 +15,8 @@ import {
 } from "components/FullPageLayout/Topbar";
 import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
 import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
+import { ChevronLeftIcon } from "lucide-react";
+import { CircleDollarSign } from "lucide-react";
 import { TrashIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { linkToTemplate, useLinks } from "modules/navigation";
@@ -108,7 +108,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 		<Topbar css={{ gridArea: "topbar" }}>
 			<Tooltip title="Back to workspaces">
 				<TopbarIconButton component={RouterLink} to="/workspaces">
-					<ArrowBackOutlined />
+					<ChevronLeftIcon className="size-icon-sm" />
 				</TopbarIconButton>
 			</Tooltip>
 
@@ -163,7 +163,10 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 					>
 						<TopbarData>
 							<TopbarIcon>
-								<QuotaIcon aria-label="Daily usage" />
+								<CircleDollarSign
+									className="size-icon-sm"
+									aria-label="Daily usage"
+								/>
 							</TopbarIcon>
 
 							<span>
diff --git a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
index ac36009dac..a6b0a27b37 100644
--- a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
+++ b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
 import { API } from "api/api";
 import type { TemplateVersion, Workspace } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -9,6 +8,7 @@ import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { MonitorDownIcon } from "lucide-react";
 import { ClockIcon, SettingsIcon, UserIcon } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useMemo, useState } from "react";
 import { useQueries } from "react-query";
@@ -351,7 +351,7 @@ const Updates: FC<UpdatesProps> = ({ workspaces, updates, error }) => {
 				css={styles.summary}
 			>
 				<Stack direction="row" alignItems="center" spacing={1}>
-					<InstallDesktopIcon css={styles.summaryIcon} />
+					<MonitorDownIcon className="size-icon-sm" />
 					<span>{workspaceCount}</span>
 				</Stack>
 				{updateCount && (
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index f4fd998f87..55dd59db6a 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -1,4 +1,3 @@
-import CloudQueue from "@mui/icons-material/CloudQueue";
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, Workspace } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -18,6 +17,7 @@ import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidg
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { TableToolbar } from "components/TableToolbar/TableToolbar";
+import { CloudIcon } from "lucide-react";
 import { ChevronDownIcon, PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
 import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
 import type { FC } from "react";
@@ -172,7 +172,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 								</DropdownMenuItem>
 								<DropdownMenuSeparator />
 								<DropdownMenuItem onClick={onUpdateAll}>
-									<CloudQueue /> Update&hellip;
+									<CloudIcon className="size-icon-sm" /> Update&hellip;
 								</DropdownMenuItem>
 								<DropdownMenuItem
 									className="text-content-destructive focus:text-content-destructive"
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 047d7a6126..f91119e79d 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -1,4 +1,3 @@
-import Star from "@mui/icons-material/Star";
 import Checkbox from "@mui/material/Checkbox";
 import Skeleton from "@mui/material/Skeleton";
 import { templateVersion } from "api/queries/templates";
@@ -45,6 +44,7 @@ import {
 } from "components/Tooltip/Tooltip";
 import { useAuthenticated } from "hooks";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
+import { StarIcon } from "lucide-react";
 import { EllipsisVertical } from "lucide-react";
 import {
 	BanIcon,
@@ -231,7 +231,9 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 										title={
 											<Stack direction="row" spacing={0.5} alignItems="center">
 												{workspace.name}
-												{workspace.favorite && <Star className="w-4 h-4" />}
+												{workspace.favorite && (
+													<StarIcon className="size-icon-xs" />
+												)}
 												{workspace.outdated && (
 													<WorkspaceOutdatedTooltip workspace={workspace} />
 												)}
diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx
index 08bca308b2..135b965589 100644
--- a/site/src/utils/workspace.tsx
+++ b/site/src/utils/workspace.tsx
@@ -1,11 +1,11 @@
 import type { Theme } from "@emotion/react";
-import QueuedIcon from "@mui/icons-material/HourglassEmpty";
 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 { HourglassIcon } from "lucide-react";
 import { CircleAlertIcon, PlayIcon, SquareIcon } from "lucide-react";
 import semver from "semver";
 import { getPendingStatusLabel } from "./provisionerJob";
@@ -249,7 +249,7 @@ export const getDisplayWorkspaceStatus = (
 			return {
 				type: "active",
 				text: getPendingStatusLabel(provisionerJob),
-				icon: <QueuedIcon />,
+				icon: <HourglassIcon className="size-icon-sm" />,
 			} as const;
 	}
 };