chore: replace MUI icons - 6 (#17751)

1. Replaced CheckCircleOutlined with CircleCheckIcon (Lucide)
2. Replaced Close/CloseIcon with XIcon (Lucide)
3. Replaced DoNotDisturbOnOutlined with CircleMinusIcon (Lucide)
4. Replaced Sell with TagIcon (Lucide)

site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx

@@ -1,10 +1,10 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import CloseIcon from "@mui/icons-material/Close";
 import IconButton from "@mui/material/IconButton";
 import Snackbar, {
 	type SnackbarProps as MuiSnackbarProps,
 } from "@mui/material/Snackbar";
 import { type ClassName, useClassName } from "hooks/useClassName";
+import { X as XIcon } from "lucide-react";
 import type { FC } from "react";
 
 type EnterpriseSnackbarVariant = "error" | "info" | "success";
@@ -47,7 +47,11 @@ export const EnterpriseSnackbar: FC<EnterpriseSnackbarProps> = ({
 				<div css={styles.actionWrapper}>
 					{action}
 					<IconButton onClick={onClose} css={{ padding: 0 }}>
-						<CloseIcon css={styles.closeIcon} aria-label="close" />
+						<XIcon
+							css={styles.closeIcon}
+							aria-label="close"
+							className="size-icon-sm"
+						/>
 					</IconButton>
 				</div>
 			}
@@ -96,8 +100,6 @@ const styles = {
 		alignItems: "center",
 	},
 	closeIcon: (theme) => ({
-		width: 25,
-		height: 25,
 		color: theme.palette.primary.contrastText,
 	}),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/modules/provisioners/ProvisionerTag.tsx

@@ -1,10 +1,10 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
 import CloseIcon from "@mui/icons-material/Close";
-import DoNotDisturbOnOutlined from "@mui/icons-material/DoNotDisturbOnOutlined";
-import Sell from "@mui/icons-material/Sell";
 import IconButton from "@mui/material/IconButton";
 import { Pill } from "components/Pill/Pill";
+import { CircleCheck as CircleCheckIcon } from "lucide-react";
+import { CircleMinus as CircleMinusIcon } from "lucide-react";
+import { Tag as TagIcon } from "lucide-react";
 import type { ComponentProps, FC } from "react";
 
 const parseBool = (s: string): { valid: boolean; value: boolean } => {
@@ -62,7 +62,11 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
 		return <BooleanPill value={boolValue}>{content}</BooleanPill>;
 	}
 	return (
-		<Pill size="lg" icon={<Sell />} data-testid={`tag-${tagName}`}>
+		<Pill
+			size="lg"
+			icon={<TagIcon className="size-icon-sm" />}
+			data-testid={`tag-${tagName}`}
+		>
 			{content}
 		</Pill>
 	);
@@ -83,9 +87,9 @@ const BooleanPill: FC<BooleanPillProps> = ({
 			size="lg"
 			icon={
 				value ? (
-					<CheckCircleOutlined css={styles.truePill} />
+					<CircleCheckIcon css={styles.truePill} className="size-icon-sm" />
 				) : (
-					<DoNotDisturbOnOutlined css={styles.falsePill} />
+					<CircleMinusIcon css={styles.falsePill} className="size-icon-sm" />
 				)
 			}
 			{...divProps}

site/src/modules/resources/PortForwardButton.tsx

@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import CloseIcon from "@mui/icons-material/Close";
 import LockIcon from "@mui/icons-material/Lock";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
 import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
@@ -41,6 +40,7 @@ import {
 } from "components/deprecated/Popover/Popover";
 import { type FormikContextType, useFormik } from "formik";
 import { type ClassName, useClassName } from "hooks/useClassName";
+import { X as XIcon } from "lucide-react";
 import { ChevronDownIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { type FC, useState } from "react";
@@ -497,7 +497,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 												await sharedPortsQuery.refetch();
 											}}
 										>
-											<CloseIcon
+											<XIcon
 												css={{
 													width: 14,
 													height: 14,

site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Close from "@mui/icons-material/Close";
 import WarningOutlined from "@mui/icons-material/WarningOutlined";
 import Button from "@mui/material/Button";
 import Drawer from "@mui/material/Drawer";
@@ -8,6 +7,7 @@ import { visuallyHidden } from "@mui/utils";
 import { JobError } from "api/queries/templates";
 import type { TemplateVersion } from "api/typesGenerated";
 import { Loader } from "components/Loader/Loader";
+import { X as XIcon } from "lucide-react";
 import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
 import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
 import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
@@ -66,7 +66,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 				<header css={styles.header}>
 					<h3 css={styles.title}>Creating template...</h3>
 					<IconButton size="small" onClick={drawerProps.onClose}>
-						<Close css={styles.closeIcon} />
+						<XIcon css={styles.closeIcon} />
 						<span style={visuallyHidden}>Close build logs</span>
 					</IconButton>
 				</header>

site/src/pages/HealthPage/Content.tsx

@@ -1,10 +1,10 @@
 import { css } from "@emotion/css";
 import { useTheme } from "@emotion/react";
-import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
-import DoNotDisturbOnOutlined from "@mui/icons-material/DoNotDisturbOnOutlined";
 import ErrorOutline from "@mui/icons-material/ErrorOutline";
 import Link from "@mui/material/Link";
 import type { HealthCode, HealthSeverity } from "api/typesGenerated";
+import { CircleCheck as CircleCheckIcon } from "lucide-react";
+import { CircleMinus as CircleMinusIcon } from "lucide-react";
 import {
 	type ComponentProps,
 	type FC,
@@ -57,7 +57,7 @@ interface HealthIconProps {
 export const HealthIcon: FC<HealthIconProps> = ({ size, severity }) => {
 	const theme = useTheme();
 	const color = healthyColor(theme, severity);
-	const Icon = severity === "error" ? ErrorOutline : CheckCircleOutlined;
+	const Icon = severity === "error" ? ErrorOutline : CircleCheckIcon;
 
 	return <Icon css={{ width: size, height: size, color }} />;
 };
@@ -201,9 +201,9 @@ export const BooleanPill: FC<BooleanPillProps> = ({
 		<Pill
 			icon={
 				value ? (
-					<CheckCircleOutlined css={{ color }} />
+					<CircleCheckIcon css={{ color }} className="size-icon-sm" />
 				) : (
-					<DoNotDisturbOnOutlined css={{ color }} />
+					<CircleMinusIcon css={{ color }} className="size-icon-sm" />
 				)
 			}
 			{...divProps}

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

@@ -1,6 +1,5 @@
 import { useTheme } from "@emotion/react";
 import CancelOutlined from "@mui/icons-material/CancelOutlined";
-import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
 import LinkOutlined from "@mui/icons-material/LinkOutlined";
 import LinearProgress from "@mui/material/LinearProgress";
 import Link from "@mui/material/Link";
@@ -45,6 +44,7 @@ import {
 	subDays,
 } from "date-fns";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
+import { CircleCheck as CircleCheckIcon } from "lucide-react";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
 import {
 	type FC,
@@ -759,12 +759,11 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 					</>
 				) : (
 					<>
-						<CheckCircleOutlined
+						<CircleCheckIcon
 							css={{
-								width: 16,
-								height: 16,
 								color: theme.palette.success.light,
 							}}
+							className="size-icon-xs"
 						/>
 						True
 					</>

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

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import KeyIcon from "@mui/icons-material/VpnKey";
 import Button from "@mui/material/Button";
@@ -16,6 +15,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 { type FC, useState } from "react";
 import { useMutation } from "react-query";
 import { docs } from "utils/docs";
@@ -191,11 +191,11 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 								fontSize: 14,
 							}}
 						>
-							<CheckCircleOutlined
+							<CircleCheckIcon
 								css={{
 									color: theme.palette.success.light,
-									fontSize: 16,
 								}}
+								className="size-icon-xs"
 							/>
 							<span>
 								Authenticated with{" "}