chore: migrate MUI icons to lucide icons (#19967)

This PR completes the migration from Material UI icons to Lucide icons.

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

@@ -1,6 +1,6 @@
-import ComputerIcon from "@mui/icons-material/Computer";
 import type { WorkspaceApp } from "api/typesGenerated";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
+import { LaptopIcon } from "lucide-react";
 import type { FC } from "react";
 
 interface BaseIconProps {
@@ -22,6 +22,6 @@ export const BaseIcon: FC<BaseIconProps> = ({ app, onIconPathError }) => {
 			}}
 		/>
 	) : (
-		<ComputerIcon />
+		<LaptopIcon />
 	);
 };

site/src/modules/resources/DownloadAgentLogsButton.tsx

@@ -1,9 +1,9 @@
-import DownloadOutlined from "@mui/icons-material/DownloadOutlined";
 import { agentLogs } from "api/queries/workspaces";
 import type { WorkspaceAgent, WorkspaceAgentLog } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { saveAs } from "file-saver";
+import { DownloadIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { useQueryClient } from "react-query";
 
@@ -54,7 +54,7 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({
 				}
 			}}
 		>
-			<DownloadOutlined />
+			<DownloadIcon />
 			{isDownloading ? "Downloading..." : "Download logs"}
 		</Button>
 	);

site/src/pages/DeploymentSettingsPage/Option.tsx

@@ -1,6 +1,6 @@
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
-import BuildCircleOutlinedIcon from "@mui/icons-material/BuildCircleOutlined";
 import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
+import { WrenchIcon } from "lucide-react";
 import type { FC, HTMLAttributes, PropsWithChildren } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 
@@ -90,16 +90,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
 									alignItems: "center",
 								}}
 							>
-								{isEnabled && (
-									<BuildCircleOutlinedIcon
-										css={(theme) => ({
-											width: 16,
-											height: 16,
-											color: theme.palette.mode,
-											margin: "0 8px",
-										})}
-									/>
-								)}
+								{isEnabled && <WrenchIcon className="size-4 mx-2" />}
 								{option}
 							</div>
 						</li>

site/src/pages/HealthPage/DERPPage.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import LocationOnOutlined from "@mui/icons-material/LocationOnOutlined";
 import Button from "@mui/material/Button";
 import type {
 	HealthcheckReport,
@@ -7,6 +6,7 @@ import type {
 	NetcheckReport,
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import { MapPinIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link, useOutletContext } from "react-router";
 import { pageTitle } from "utils/page";
@@ -102,10 +102,9 @@ const DERPPage: FC = () => {
 								return (
 									<Button
 										startIcon={
-											<LocationOnOutlined
-												css={{
-													width: 16,
-													height: 16,
+											<MapPinIcon
+												className="size-4"
+												style={{
 													color: healthyColor(
 														theme,
 														severity as HealthSeverity,

site/src/pages/HealthPage/WorkspaceProxyPage.tsx

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

site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx

@@ -1,6 +1,4 @@
 import { useTheme } from "@emotion/react";
-import CancelOutlined from "@mui/icons-material/CancelOutlined";
-import LinkOutlined from "@mui/icons-material/LinkOutlined";
 import LinearProgress from "@mui/material/LinearProgress";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
@@ -36,7 +34,11 @@ import {
 import { Loader } from "components/Loader/Loader";
 import { Stack } from "components/Stack/Stack";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
-import { CircleCheck as CircleCheckIcon } from "lucide-react";
+import {
+	CircleCheck as CircleCheckIcon,
+	CircleXIcon,
+	LinkIcon,
+} from "lucide-react";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
 import {
 	type FC,
@@ -727,13 +729,7 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 				}}
 			>
 				<TextValue>{usage.value}</TextValue>
-				<LinkOutlined
-					css={{
-						width: 14,
-						height: 14,
-						color: theme.palette.primary.light,
-					}}
-				/>
+				<LinkIcon className="size-icon-xs text-content-link" />
 			</Link>
 		);
 	}
@@ -770,13 +766,7 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 			>
 				{usage.value === "false" ? (
 					<>
-						<CancelOutlined
-							css={{
-								width: 16,
-								height: 16,
-								color: theme.palette.error.light,
-							}}
-						/>
+						<CircleXIcon className="size-icon-xs text-content-destructive" />
 						False
 					</>
 				) : (

site/src/pages/TemplatePage/TemplatePageHeader.tsx

@@ -1,4 +1,3 @@
-import EditIcon from "@mui/icons-material/EditOutlined";
 import Button from "@mui/material/Button";
 import { API } from "api/api";
 import { workspaces } from "api/queries/workspaces";
@@ -30,6 +29,7 @@ import { Stack } from "components/Stack/Stack";
 import {
 	CopyIcon,
 	DownloadIcon,
+	EditIcon,
 	EllipsisVertical,
 	PlusIcon,
 	SettingsIcon,

site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx

@@ -1,4 +1,3 @@
-import EditIcon from "@mui/icons-material/Edit";
 import Button from "@mui/material/Button";
 import type { TemplateVersion } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -11,7 +10,7 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
 import { Stats, StatsItem } from "components/Stats/Stats";
-import { PlusIcon } from "lucide-react";
+import { EditIcon, PlusIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { TemplateFiles } from "modules/templates/TemplateFiles/TemplateFiles";
 import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
@@ -60,7 +59,7 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
 							</Button>
 						)}
 						<Button
-							startIcon={<EditIcon />}
+							startIcon={<EditIcon className="size-icon-xs" />}
 							component={RouterLink}
 							to={`${templateLink}/versions/${versionName}/edit`}
 						>

site/src/pages/TemplatesPage/TemplatesPageView.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined";
 import Skeleton from "@mui/material/Skeleton";
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, TemplateExample } from "api/typesGenerated";
@@ -38,7 +37,7 @@ import {
 	TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
-import { PlusIcon } from "lucide-react";
+import { ArrowRightIcon, PlusIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import type { WorkspacePermissions } from "modules/permissions/workspaces";
 import type { FC } from "react";
@@ -172,7 +171,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
 						}}
 					>
 						<RouterLink to={`${templatePageLink}/workspace`}>
-							<ArrowForwardOutlined />
+							<ArrowRightIcon />
 							Create Workspace
 						</RouterLink>
 					</Button>

site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import AutorenewIcon from "@mui/icons-material/Autorenew";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -28,7 +27,7 @@ import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import type { ExternalAuthPollingState } from "hooks/useExternalAuth";
-import { EllipsisVertical } from "lucide-react";
+import { EllipsisVertical, RefreshCcwIcon } from "lucide-react";
 import { type FC, useCallback, useEffect, useState } from "react";
 import { useQuery } from "react-query";
 
@@ -142,11 +141,7 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 							title="Authentication token will automatically refresh when expired."
 							placement="right"
 						>
-							<AutorenewIcon
-								sx={{
-									fontSize: "0.75rem",
-								}}
-							/>
+							<RefreshCcwIcon className="size-3" />
 						</Tooltip>
 					)}
 

site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx

@@ -1,6 +1,5 @@
 import { useTheme } from "@emotion/react";
 import GitHubIcon from "@mui/icons-material/GitHub";
-import KeyIcon from "@mui/icons-material/VpnKey";
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
@@ -15,7 +14,7 @@ import type {
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Stack } from "components/Stack/Stack";
-import { CircleCheck as CircleCheckIcon } from "lucide-react";
+import { CircleCheck as CircleCheckIcon, KeyIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { useMutation } from "react-query";
 import { docs } from "utils/docs";
@@ -230,7 +229,7 @@ interface OIDCIconProps {
 
 const OIDCIcon: FC<OIDCIconProps> = ({ oidcAuth }) => {
 	if (!oidcAuth.iconUrl) {
-		return <KeyIcon css={{ width: 16, height: 16 }} />;
+		return <KeyIcon className="size-4" />;
 	}
 
 	return (

site/src/pages/UserSettingsPage/Sidebar.tsx

@@ -1,5 +1,3 @@
-import AppearanceIcon from "@mui/icons-material/Brush";
-import NotificationsIcon from "@mui/icons-material/NotificationsNoneOutlined";
 import type { User } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { GitIcon } from "components/Icons/GitIcon";
@@ -9,6 +7,8 @@ import {
 	SidebarNavItem,
 } from "components/Sidebar/Sidebar";
 import {
+	BellIcon,
+	BrushIcon,
 	CalendarCogIcon,
 	FingerprintIcon,
 	KeyIcon,
@@ -39,7 +39,7 @@ export const Sidebar: FC<SidebarProps> = ({ user }) => {
 			<SidebarNavItem href="account" icon={UserIcon}>
 				Account
 			</SidebarNavItem>
-			<SidebarNavItem href="appearance" icon={AppearanceIcon}>
+			<SidebarNavItem href="appearance" icon={BrushIcon}>
 				Appearance
 			</SidebarNavItem>
 			<SidebarNavItem href="external-auth" icon={GitIcon}>
@@ -64,7 +64,7 @@ export const Sidebar: FC<SidebarProps> = ({ user }) => {
 			<SidebarNavItem href="tokens" icon={KeyIcon}>
 				Tokens
 			</SidebarNavItem>
-			<SidebarNavItem href="notifications" icon={NotificationsIcon}>
+			<SidebarNavItem href="notifications" icon={BellIcon}>
 				Notifications
 			</SidebarNavItem>
 		</BaseSidebar>

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

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import GroupIcon from "@mui/icons-material/Group";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import type { Group } from "api/typesGenerated";
@@ -11,7 +10,9 @@ import {
 } from "components/deprecated/Popover/Popover";
 import { OverflowY } from "components/OverflowY/OverflowY";
 import { TableCell } from "components/Table/Table";
+import { UsersIcon } from "lucide-react";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 
 type GroupsCellProps = {
 	userGroups: readonly Group[] | undefined;
@@ -42,12 +43,13 @@ export const UserGroupsCell: FC<GroupsCellProps> = ({ userGroups }) => {
 							type="button"
 						>
 							<div className="flex flex-row gap-2 items-center">
-								<GroupIcon
-									css={{
-										width: "1rem",
-										height: "1rem",
-										opacity: userGroups.length > 0 ? 0.8 : 0.5,
-									}}
+								<UsersIcon
+									className={cn([
+										"size-4 opacity-50",
+										{
+											"opacity-80": userGroups.length > 0,
+										},
+									])}
 								/>
 
 								<span>

site/src/pages/WorkspacePage/HistorySidebar.tsx

@@ -1,4 +1,3 @@
-import ArrowDownwardOutlined from "@mui/icons-material/ArrowDownwardOutlined";
 import { infiniteWorkspaceBuilds } from "api/queries/workspaceBuilds";
 import type { Workspace } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
@@ -10,6 +9,7 @@ import {
 } from "components/FullPageLayout/Sidebar";
 import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import { Spinner } from "components/Spinner/Spinner";
+import { ArrowDownIcon } from "lucide-react";
 import {
 	WorkspaceBuildData,
 	WorkspaceBuildDataSkeleton,
@@ -57,7 +57,7 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 								className="w-full"
 							>
 								<Spinner loading={buildsQuery.isFetchingNextPage}>
-									<ArrowDownwardOutlined />
+									<ArrowDownIcon />
 								</Spinner>
 								Show more builds
 							</Button>