chore: migrate MUI icons to lucide-react (#20193)

site/package.json

@@ -91,7 +91,7 @@
 		"humanize-duration": "3.32.2",
 		"jszip": "3.10.1",
 		"lodash": "4.17.21",
-		"lucide-react": "0.474.0",
+		"lucide-react": "0.545.0",
 		"monaco-editor": "0.53.0",
 		"pretty-bytes": "6.1.1",
 		"react": "19.1.1",

site/pnpm-lock.yaml

@@ -188,8 +188,8 @@ importers:
         specifier: 4.17.21
         version: 4.17.21
       lucide-react:
-        specifier: 0.474.0
-        version: 0.474.0(react@19.1.1)
+        specifier: 0.545.0
+        version: 0.545.0(react@19.1.1)
       monaco-editor:
         specifier: 0.53.0
         version: 0.53.0
@@ -4885,8 +4885,8 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==, tarball: https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz}
 
-  lucide-react@0.474.0:
-    resolution: {integrity: sha512-CmghgHkh0OJNmxGKWc0qfPJCYHASPMVSyGY8fj3xgk4v84ItqDg64JNKFZn5hC6E0vHi6gxnbCgwhyVB09wQtA==, tarball: https://registry.npmjs.org/lucide-react/-/lucide-react-0.474.0.tgz}
+  lucide-react@0.545.0:
+    resolution: {integrity: sha512-7r1/yUuflQDSt4f1bpn5ZAocyIxcTyVyBBChSVtBKn5M+392cPmI5YJMWOJKk/HUWGm5wg83chlAZtCcGbEZtw==, tarball: https://registry.npmjs.org/lucide-react/-/lucide-react-0.545.0.tgz}
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
@@ -11353,7 +11353,7 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@0.474.0(react@19.1.1):
+  lucide-react@0.545.0(react@19.1.1):
     dependencies:
       react: 19.1.1
 

site/src/modules/resources/AppLink/ShareIcon.tsx

@@ -1,9 +1,11 @@
-import BusinessIcon from "@mui/icons-material/Business";
-import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined";
-import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined";
 import Tooltip from "@mui/material/Tooltip";
 import type * as TypesGen from "api/typesGenerated";
-import { SquareArrowOutUpRightIcon } from "lucide-react";
+import {
+	Building2Icon,
+	GlobeIcon,
+	SquareArrowOutUpRightIcon,
+	UsersIcon,
+} from "lucide-react";
 
 interface ShareIconProps {
 	app: TypesGen.WorkspaceApp;
@@ -20,21 +22,21 @@ export const ShareIcon = ({ app }: ShareIconProps) => {
 	if (app.sharing_level === "authenticated") {
 		return (
 			<Tooltip title="Shared with all authenticated users">
-				<GroupOutlinedIcon />
+				<UsersIcon />
 			</Tooltip>
 		);
 	}
 	if (app.sharing_level === "organization") {
 		return (
 			<Tooltip title="Shared with organization members">
-				<BusinessIcon />
+				<Building2Icon />
 			</Tooltip>
 		);
 	}
 	if (app.sharing_level === "public") {
 		return (
 			<Tooltip title="Shared publicly">
-				<PublicOutlinedIcon />
+				<GlobeIcon />
 			</Tooltip>
 		);
 	}

site/src/modules/resources/PortForwardButton.tsx

@@ -1,8 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import BusinessIcon from "@mui/icons-material/Business";
-import LockIcon from "@mui/icons-material/Lock";
-import LockOpenIcon from "@mui/icons-material/LockOpen";
-import SensorsIcon from "@mui/icons-material/Sensors";
 import FormControl from "@mui/material/FormControl";
 import Link from "@mui/material/Link";
 import MenuItem from "@mui/material/MenuItem";
@@ -45,8 +41,12 @@ import {
 } from "components/Tooltip/Tooltip";
 import { useFormik } from "formik";
 import {
+	BuildingIcon,
 	ChevronDownIcon,
 	ExternalLinkIcon,
+	LockIcon,
+	LockOpenIcon,
+	RadioIcon,
 	ShareIcon,
 	X as XIcon,
 } from "lucide-react";
@@ -385,7 +385,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 										target="_blank"
 										rel="noreferrer"
 									>
-										<SensorsIcon css={{ width: 14, height: 14 }} />
+										<RadioIcon className="size-icon-sm" />
 										{port.port}
 									</Link>
 									<Link
@@ -475,11 +475,11 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 										rel="noreferrer"
 									>
 										{share.share_level === "public" ? (
-											<LockOpenIcon css={{ width: 14, height: 14 }} />
+											<LockOpenIcon className="size-icon-sm" />
 										) : share.share_level === "organization" ? (
-											<BusinessIcon css={{ width: 14, height: 14 }} />
+											<BuildingIcon className="size-icon-sm" />
 										) : (
-											<LockIcon css={{ width: 14, height: 14 }} />
+											<LockIcon className="size-icon-sm" />
 										)}
 										{label}
 									</Link>

site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx

@@ -1,11 +1,13 @@
 import { css } from "@emotion/react";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import FormatAlignLeftOutlined from "@mui/icons-material/FormatAlignLeftOutlined";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
 import { DockerIcon } from "components/Icons/DockerIcon";
-import { ChevronRightIcon } from "lucide-react";
+import {
+	ChevronDownIcon,
+	ChevronRightIcon,
+	TextAlignStartIcon,
+} from "lucide-react";
 import {
 	type CSSProperties,
 	type ElementType,
@@ -90,7 +92,7 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
 
 		let icon: ElementType | undefined;
 		if (isFolder(content)) {
-			icon = FormatAlignLeftOutlined;
+			icon = TextAlignStartIcon;
 		} else if (filename.endsWith(".tf")) {
 			icon = FileTypeTerraform;
 		} else if (filename.endsWith(".md")) {
@@ -201,7 +203,7 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
 
 	return (
 		<SimpleTreeView
-			slots={{ collapseIcon: ExpandMoreIcon, expandIcon: ChevronRightIcon }}
+			slots={{ collapseIcon: ChevronDownIcon, expandIcon: ChevronRightIcon }}
 			aria-label="Files"
 			defaultExpandedItems={activePath ? expandablePaths(activePath) : []}
 			defaultSelectedItems={activePath}

site/src/modules/templates/TemplateFiles/TemplateFiles.tsx

@@ -1,11 +1,11 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import EditOutlined from "@mui/icons-material/EditOutlined";
-import RadioButtonCheckedOutlined from "@mui/icons-material/RadioButtonCheckedOutlined";
 import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter";
 import set from "lodash/set";
+import { EditIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { type FC, useCallback, useMemo } from "react";
 import { Link } from "react-router";
+import { cn } from "utils/cn";
 import type { FileTree } from "utils/filetree";
 import type { TemplateVersionFiles } from "utils/templateVersion";
 import { TemplateFileTree } from "./TemplateFileTree";
@@ -94,16 +94,13 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 							return (
 								<div key={filename} css={styles.filePanel} id={filename}>
 									<header css={styles.fileHeader}>
-										{filename}
-										{info.hasDiff && (
-											<RadioButtonCheckedOutlined
-												css={{
-													width: 14,
-													height: 14,
-													color: theme.roles.warning.fill.outline,
-												}}
-											/>
-										)}
+										<span
+											className={cn({
+												"text-content-warning": info.hasDiff,
+											})}
+										>
+											{filename}
+										</span>
 
 										<div css={{ marginLeft: "auto" }}>
 											<Link
@@ -121,7 +118,7 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 													},
 												}}
 											>
-												<EditOutlined css={{ fontSize: "inherit" }} />
+												<EditIcon className="text-inherit size-icon-xs" />
 												Edit
 											</Link>
 										</div>

site/src/pages/HealthPage/DismissWarningButton.tsx

@@ -1,11 +1,10 @@
-import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
-import NotificationOutlined from "@mui/icons-material/NotificationsOutlined";
 import Skeleton from "@mui/material/Skeleton";
 import { healthSettings, updateHealthSettings } from "api/queries/debug";
 import type { HealthSection } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { Spinner } from "components/Spinner/Spinner";
+import { BellIcon, BellOffIcon } from "lucide-react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 
 export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
@@ -49,7 +48,7 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
 				}}
 			>
 				<Spinner loading={enableMutation.isPending}>
-					<NotificationsOffOutlined />
+					<BellOffIcon />
 				</Spinner>
 				Enable warnings
 			</Button>
@@ -69,7 +68,7 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
 			}}
 		>
 			<Spinner loading={dismissMutation.isPending}>
-				<NotificationOutlined />
+				<BellIcon />
 			</Spinner>
 			Dismiss warnings
 		</Button>

site/src/pages/HealthPage/HealthLayout.tsx

@@ -1,6 +1,3 @@
-import { useTheme } from "@emotion/react";
-import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
-import ReplayIcon from "@mui/icons-material/Replay";
 import CircularProgress from "@mui/material/CircularProgress";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
@@ -9,6 +6,7 @@ import type { HealthSeverity } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
 import kebabCase from "lodash/fp/kebabCase";
+import { BellOffIcon, RotateCcwIcon } from "lucide-react";
 import { DashboardFullPage } from "modules/dashboard/DashboardLayout";
 import { type FC, Suspense } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
@@ -28,7 +26,6 @@ const linkStyles = {
 };
 
 export const HealthLayout: FC = () => {
-	const theme = useTheme();
 	const queryClient = useQueryClient();
 	const {
 		data: healthStatus,
@@ -91,7 +88,7 @@ export const HealthLayout: FC = () => {
 											{isRefreshing ? (
 												<CircularProgress size={16} />
 											) : (
-												<ReplayIcon className="size-5" />
+												<RotateCcwIcon className="size-5" />
 											)}
 										</IconButton>
 									</Tooltip>
@@ -155,13 +152,7 @@ export const HealthLayout: FC = () => {
 											/>
 											{label}
 											{healthSection.dismissed && (
-												<NotificationsOffOutlined
-													css={{
-														fontSize: 14,
-														marginLeft: "auto",
-														color: theme.palette.text.disabled,
-													}}
-												/>
+												<BellOffIcon className="size-icon-sm ml-auto text-content-disabled" />
 											)}
 										</NavLink>
 									);

site/src/pages/HealthPage/WorkspaceProxyPage.tsx

@@ -2,7 +2,7 @@ import { useTheme } from "@emotion/react";
 import Tooltip from "@mui/material/Tooltip";
 import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
-import { EarthIcon, HashIcon } from "lucide-react";
+import { GlobeIcon, HashIcon } from "lucide-react";
 import type { FC } from "react";
 import { useOutletContext } from "react-router";
 import { createDayString } from "utils/createDayString";
@@ -107,7 +107,7 @@ const WorkspaceProxyPage: FC = () => {
 								<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
 									{region.wildcard_hostname && (
 										<Tooltip title="Wildcard Hostname">
-											<Pill icon={<EarthIcon />}>
+											<Pill icon={<GlobeIcon />}>
 												{region.wildcard_hostname}
 											</Pill>
 										</Tooltip>

site/src/pages/LoginPage/OAuthSignInForm.tsx

@@ -1,8 +1,8 @@
 import GitHubIcon from "@mui/icons-material/GitHub";
-import KeyIcon from "@mui/icons-material/VpnKey";
 import { visuallyHidden } from "@mui/utils";
 import type { AuthMethods } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
+import { KeyIcon } from "lucide-react";
 import { type FC, useId } from "react";
 import { Language } from "./Language";
 

site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx

@@ -1,5 +1,3 @@
-import CheckOutlined from "@mui/icons-material/CheckOutlined";
-import FileCopyOutlined from "@mui/icons-material/FileCopyOutlined";
 import { API } from "api/api";
 import { DetailedError } from "api/errors";
 import type {
@@ -18,6 +16,7 @@ import { Skeleton } from "components/Skeleton/Skeleton";
 import { useAuthenticated } from "hooks";
 import { useEffectEvent } from "hooks/hookPolyfills";
 import { useClipboard } from "hooks/useClipboard";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import {
 	Diagnostics,
 	DynamicParameter,
@@ -308,8 +307,8 @@ const ButtonPreview: FC<ButtonPreviewProps> = ({ template, buttonValues }) => {
 					clipboard.copyToClipboard(textToCopy);
 				}}
 			>
-				{clipboard.showCopiedSuccess ? <CheckOutlined /> : <FileCopyOutlined />}{" "}
-				Copy button code
+				{clipboard.showCopiedSuccess ? <CheckIcon /> : <CopyIcon />} Copy button
+				code
 			</Button>
 		</div>
 	);

site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx

@@ -58,7 +58,7 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
 						)}
 						<Button variant="outline" asChild>
 							<RouterLink to={`${templateLink}/versions/${versionName}/edit`}>
-								<EditIcon />
+								<EditIcon className="!size-icon-sm" />
 								Edit
 							</RouterLink>
 						</Button>

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

@@ -1,9 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import GitHub from "@mui/icons-material/GitHub";
-import HideSourceOutlined from "@mui/icons-material/HideSourceOutlined";
-import KeyOutlined from "@mui/icons-material/KeyOutlined";
-import PasswordOutlined from "@mui/icons-material/PasswordOutlined";
-import ShieldOutlined from "@mui/icons-material/ShieldOutlined";
 import Skeleton from "@mui/material/Skeleton";
 import type { GroupsByUserId } from "api/queries/groups";
 import type * as TypesGen from "api/typesGenerated";
@@ -28,7 +24,14 @@ import {
 } from "components/TableLoader/TableLoader";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { EllipsisVertical, TrashIcon } from "lucide-react";
+import {
+	BanIcon,
+	EllipsisVertical,
+	KeyIcon,
+	ShieldIcon,
+	TrashIcon,
+	UserLockIcon,
+} from "lucide-react";
 import type { FC } from "react";
 import { UserRoleCell } from "../../OrganizationSettingsPage/UserTable/UserRoleCell";
 import { UserGroupsCell } from "./UserGroupsCell";
@@ -260,22 +263,22 @@ const LoginType: FC<LoginTypeProps> = ({ authMethods, value }) => {
 
 	if (value === "password") {
 		displayName = "Password";
-		icon = <PasswordOutlined css={styles.icon} />;
+		icon = <UserLockIcon css={styles.icon} />;
 	} else if (value === "none") {
 		displayName = "None";
-		icon = <HideSourceOutlined css={styles.icon} />;
+		icon = <BanIcon css={styles.icon} />;
 	} else if (value === "github") {
 		displayName = "GitHub";
 		icon = <GitHub css={styles.icon} />;
 	} else if (value === "token") {
 		displayName = "Token";
-		icon = <KeyOutlined css={styles.icon} />;
+		icon = <KeyIcon css={styles.icon} />;
 	} else if (value === "oidc") {
 		displayName =
 			authMethods.oidc.signInText === "" ? "OIDC" : authMethods.oidc.signInText;
 		icon =
 			authMethods.oidc.iconUrl === "" ? (
-				<ShieldOutlined css={styles.icon} />
+				<ShieldIcon css={styles.icon} />
 			) : (
 				<img
 					alt="Open ID Connect icon"

site/src/pages/WorkspacePage/Workspace.tsx

@@ -1,10 +1,9 @@
-import HistoryOutlined from "@mui/icons-material/HistoryOutlined";
-import HubOutlined from "@mui/icons-material/HubOutlined";
 import AlertTitle from "@mui/material/AlertTitle";
 import type * as TypesGen from "api/typesGenerated";
 import { Alert, AlertDetail } from "components/Alert/Alert";
 import { SidebarIconButton } from "components/FullPageLayout/Sidebar";
 import { useSearchParamsKey } from "hooks/useSearchParamsKey";
+import { BlocksIcon, HistoryIcon } from "lucide-react";
 import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
 import { AgentRow } from "modules/resources/AgentRow";
 import { WorkspaceTimings } from "modules/workspaces/WorkspaceTiming/WorkspaceTimings";
@@ -131,7 +130,8 @@ export const Workspace: FC<WorkspaceProps> = ({
 								setSidebarOption("resources");
 							}}
 						>
-							<HubOutlined />
+							<BlocksIcon className="size-icon-sm" />
+							<span className="sr-only">Resources</span>
 						</SidebarIconButton>
 						<SidebarIconButton
 							isActive={sidebarOption.value === "history"}
@@ -139,7 +139,8 @@ export const Workspace: FC<WorkspaceProps> = ({
 								setSidebarOption("history");
 							}}
 						>
-							<HistoryOutlined />
+							<HistoryIcon className="size-icon-sm" />
+							<span className="sr-only">History</span>
 						</SidebarIconButton>
 					</div>