chore: replace MUI icons with Lucide icons - 5 (#17750)

Replacements:

MUI | Lucide
OpenInNewOutlined | ExternalLinkIcon
HelpOutline | CircleHelpIcon
ErrorOutline | CircleAlertIcon

site/migrate-icons.md

@@ -1,8 +0,0 @@
-Look for all the @mui/icons-material icons below and replace them accordinlying with the Lucide icon:
-
-MUI | Lucide
-TaskAlt | CircleCheckBigIcon
-InfoOutlined | InfoIcon
-ErrorOutline | CircleAlertIcon
-
-You should update the imports and usage.

site/src/components/Filter/Filter.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
 import Menu from "@mui/material/Menu";
@@ -14,6 +13,7 @@ import {
 import { InputGroup } from "components/InputGroup/InputGroup";
 import { SearchField } from "components/SearchField/SearchField";
 import { useDebouncedFunction } from "hooks/debounce";
+import { ExternalLinkIcon } from "lucide-react";
 import { ChevronDownIcon } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
 import type { useSearchParams } from "react-router-dom";
@@ -311,7 +311,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
 							setIsOpen(false);
 						}}
 					>
-						<OpenInNewOutlined css={{ fontSize: "14px !important" }} />
+						<ExternalLinkIcon className="size-icon-xs" />
 						View advanced filtering
 					</MenuItem>
 				)}
@@ -325,7 +325,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
 							setIsOpen(false);
 						}}
 					>
-						<OpenInNewOutlined css={{ fontSize: "14px !important" }} />
+						<ExternalLinkIcon className="size-icon-xs" />
 						{learnMoreLabel2}
 					</MenuItem>
 				)}

site/src/components/HelpTooltip/HelpTooltip.tsx

@@ -5,7 +5,6 @@ import {
 	css,
 	useTheme,
 } from "@emotion/react";
-import HelpIcon from "@mui/icons-material/HelpOutline";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import Link from "@mui/material/Link";
 import { Stack } from "components/Stack/Stack";
@@ -17,6 +16,7 @@ import {
 	PopoverTrigger,
 	usePopover,
 } from "components/deprecated/Popover/Popover";
+import { CircleHelpIcon } from "lucide-react";
 import {
 	type FC,
 	type HTMLAttributes,
@@ -25,11 +25,11 @@ import {
 	forwardRef,
 } from "react";
 
-type Icon = typeof HelpIcon;
+type Icon = typeof CircleHelpIcon;
 
 type Size = "small" | "medium";
 
-export const HelpTooltipIcon = HelpIcon;
+export const HelpTooltipIcon = CircleHelpIcon;
 
 export const HelpTooltip: FC<PopoverProps> = (props) => {
 	return <Popover mode="hover" {...props} />;

site/src/components/Latency/Latency.tsx

@@ -1,9 +1,9 @@
 import { useTheme } from "@emotion/react";
-import HelpOutline from "@mui/icons-material/HelpOutline";
 import CircularProgress from "@mui/material/CircularProgress";
 import Tooltip from "@mui/material/Tooltip";
 import { visuallyHidden } from "@mui/utils";
 import { Abbr } from "components/Abbr/Abbr";
+import { CircleHelpIcon } from "lucide-react";
 import type { FC } from "react";
 import { getLatencyColor } from "utils/latency";
 
@@ -41,10 +41,10 @@ export const Latency: FC<LatencyProps> = ({
 				<>
 					<span css={{ ...visuallyHidden }}>{notAvailableText}</span>
 
-					<HelpOutline
+					<CircleHelpIcon
+						className="size-icon-sm"
 						css={{
 							marginLeft: "auto",
-							fontSize: "14px !important",
 						}}
 						style={{ color }}
 					/>

site/src/components/RichParameterInput/RichParameterInput.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import ErrorOutline from "@mui/icons-material/ErrorOutline";
 import SettingsIcon from "@mui/icons-material/Settings";
 import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -14,6 +13,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { CircleAlertIcon } from "lucide-react";
 import { type FC, type ReactNode, useState } from "react";
 import type {
 	AutofillBuildParameter,
@@ -143,7 +143,10 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
 			)}
 			{!parameter.mutable && (
 				<Tooltip title="This value cannot be modified after the workspace has been created.">
-					<Pill type="warning" icon={<ErrorOutline />}>
+					<Pill
+						type="warning"
+						icon={<CircleAlertIcon className="size-icon-xs" />}
+					>
 						Immutable
 					</Pill>
 				</Tooltip>

site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx

@@ -4,7 +4,6 @@ import BuildingIcon from "@mui/icons-material/Build";
 import DownloadIcon from "@mui/icons-material/CloudDownload";
 import UploadIcon from "@mui/icons-material/CloudUpload";
 import CollectedIcon from "@mui/icons-material/Compare";
-import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import LatencyIcon from "@mui/icons-material/SettingsEthernet";
 import WebTerminalIcon from "@mui/icons-material/WebAsset";
@@ -24,6 +23,7 @@ import { VSCodeIcon } from "components/Icons/VSCodeIcon";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
 import { type ClassName, useClassName } from "hooks/useClassName";
+import { CircleAlertIcon } from "lucide-react";
 import prettyBytes from "pretty-bytes";
 import {
 	type FC,
@@ -151,7 +151,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 						to="/health"
 						css={[styles.statusBadge, styles.unhealthy]}
 					>
-						<ErrorIcon />
+						<CircleAlertIcon className="size-icon-sm" />
 					</Link>
 				) : (
 					<div css={styles.statusBadge}>
@@ -372,9 +372,9 @@ const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
 
 	return (
 		<Stack direction="row" spacing={1} alignItems="center">
-			<ErrorIcon
-				css={{ width: 16, height: 16 }}
-				htmlColor={theme.roles.error.outline}
+			<CircleAlertIcon
+				className="size-icon-sm"
+				css={{ color: theme.roles.error.outline }}
 			/>
 			{children}
 		</Stack>

site/src/modules/resources/AgentOutdatedTooltip.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import RefreshIcon from "@mui/icons-material/RefreshOutlined";
 import type { WorkspaceAgent } from "api/typesGenerated";
 import {
 	HelpTooltip,
@@ -11,6 +10,7 @@ import {
 } from "components/HelpTooltip/HelpTooltip";
 import { Stack } from "components/Stack/Stack";
 import { PopoverTrigger } from "components/deprecated/Popover/Popover";
+import { RotateCcwIcon } from "lucide-react";
 import type { FC } from "react";
 import { agentVersionStatus } from "../../utils/workspace";
 
@@ -68,7 +68,7 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
 
 					<HelpTooltipLinksGroup>
 						<HelpTooltipAction
-							icon={RefreshIcon}
+							icon={RotateCcwIcon}
 							onClick={onUpdate}
 							ariaLabel="Update workspace"
 						>

site/src/modules/resources/PortForwardButton.tsx

@@ -1,7 +1,6 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import LockIcon from "@mui/icons-material/Lock";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
-import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import SensorsIcon from "@mui/icons-material/Sensors";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Button from "@mui/material/Button";
@@ -40,8 +39,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 { ChevronDownIcon, ExternalLinkIcon, X as XIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { type FC, useState } from "react";
 import { useMutation, useQuery } from "react-query";
@@ -308,11 +306,10 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 										minWidth: 0,
 									}}
 								>
-									<OpenInNewOutlined
+									<ExternalLinkIcon
+										className="size-icon-xs"
 										css={{
 											flexShrink: 0,
-											width: 14,
-											height: 14,
 											color: theme.palette.text.primary,
 										}}
 									/>

site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx

@@ -1,6 +1,5 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import InfoIcon from "@mui/icons-material/InfoOutlined";
-import RefreshIcon from "@mui/icons-material/Refresh";
 import Link from "@mui/material/Link";
 import Skeleton from "@mui/material/Skeleton";
 import { getErrorDetail, getErrorMessage } from "api/errors";
@@ -17,6 +16,7 @@ import {
 	HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { usePopover } from "components/deprecated/Popover/Popover";
+import { RotateCcwIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import type { FC } from "react";
 import { useQuery } from "react-query";
@@ -104,7 +104,7 @@ const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({ workspace }) => {
 
 				<HelpTooltipLinksGroup>
 					<HelpTooltipAction
-						icon={RefreshIcon}
+						icon={RotateCcwIcon}
 						onClick={updateWorkspace.update}
 					>
 						Update

site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx

@@ -1,9 +1,9 @@
 import { css } from "@emotion/css";
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import MUITooltip, {
 	type TooltipProps as MUITooltipProps,
 } from "@mui/material/Tooltip";
+import { ExternalLinkIcon } from "lucide-react";
 import type { FC, HTMLProps } from "react";
 import { Link, type LinkProps } from "react-router-dom";
 
@@ -36,7 +36,7 @@ export const TooltipShortDescription: FC<HTMLProps<HTMLSpanElement>> = (
 export const TooltipLink: FC<LinkProps> = (props) => {
 	return (
 		<Link {...props} css={styles.link}>
-			<OpenInNewOutlined />
+			<ExternalLinkIcon className="size-icon-xs" />
 			{props.children}
 		</Link>
 	);

site/src/pages/GroupsPage/GroupPage.tsx

@@ -50,8 +50,7 @@ import {
 	TableToolbar,
 } from "components/TableToolbar/TableToolbar";
 import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
-import { TrashIcon } from "lucide-react";
-import { EllipsisVertical } from "lucide-react";
+import { EllipsisVertical, TrashIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
@@ -134,7 +133,7 @@ const GroupPage: FC = () => {
 							onClick={() => {
 								setIsDeletingGroup(true);
 							}}
-							startIcon={<TrashIcon className="size-icon-sm" />}
+							startIcon={<TrashIcon className="size-icon-xs" />}
 							css={styles.removeButton}
 						>
 							Delete&hellip;

site/src/pages/HealthPage/Content.tsx

@@ -1,10 +1,9 @@
 import { css } from "@emotion/css";
 import { useTheme } from "@emotion/react";
-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 { CircleAlertIcon } from "lucide-react";
+import { CircleCheckIcon, CircleMinusIcon } from "lucide-react";
 import {
 	type ComponentProps,
 	type FC,
@@ -57,7 +56,7 @@ interface HealthIconProps {
 export const HealthIcon: FC<HealthIconProps> = ({ size, severity }) => {
 	const theme = useTheme();
 	const color = healthyColor(theme, severity);
-	const Icon = severity === "error" ? ErrorOutline : CircleCheckIcon;
+	const Icon = severity === "error" ? CircleAlertIcon : CircleCheckIcon;
 
 	return <Icon css={{ width: size, height: size, color }} />;
 };

site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx

@@ -1,6 +1,5 @@
 import { useTheme } from "@emotion/react";
 import PlusIcon from "@mui/icons-material/AddOutlined";
-import ViewCodeIcon from "@mui/icons-material/OpenInNewOutlined";
 import Button from "@mui/material/Button";
 import type { TemplateExample } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -14,6 +13,7 @@ import {
 	PageHeaderTitle,
 } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
+import { ExternalLinkIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link } from "react-router-dom";
 
@@ -50,7 +50,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
 							target="_blank"
 							href={starterTemplate.url}
 							rel="noreferrer"
-							startIcon={<ViewCodeIcon />}
+							startIcon={<ExternalLinkIcon className="size-icon-sm" />}
 						>
 							View source code
 						</Button>

site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx

@@ -1,8 +1,8 @@
 import CheckIcon from "@mui/icons-material/CheckOutlined";
-import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import QueuedIcon from "@mui/icons-material/HourglassEmpty";
 import type { TemplateVersion } from "api/typesGenerated";
 import { Pill, PillSpinner } from "components/Pill/Pill";
+import { CircleAlertIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import type { ThemeRole } from "theme/roles";
 import { getPendingStatusLabel } from "utils/provisionerJob";
@@ -57,14 +57,14 @@ const getStatus = (
 			return {
 				type: "inactive",
 				text: "Canceled",
-				icon: <ErrorIcon />,
+				icon: <CircleAlertIcon className="size-icon-sm" />,
 			};
 		case "unknown":
 		case "failed":
 			return {
 				type: "error",
 				text: "Failed",
-				icon: <ErrorIcon />,
+				icon: <CircleAlertIcon className="size-icon-sm" />,
 			};
 		case "succeeded":
 			return {

site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx

@@ -58,7 +58,7 @@ export const TokensPageView: FC<TokensPageViewProps> = ({
 							<TableCell width="20%">Last Used</TableCell>
 							<TableCell width="20%">Expires At</TableCell>
 							<TableCell width="20%">Created At</TableCell>
-							<TableCell width="0%"></TableCell>
+							<TableCell width="0%" />
 						</TableRow>
 					</TableHead>
 					<TableBody>

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 HelpOutline from "@mui/icons-material/HelpOutline";
 import HourglassEmpty from "@mui/icons-material/HourglassEmpty";
 import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
 import OpenInNew from "@mui/icons-material/OpenInNew";
@@ -18,6 +17,7 @@ import type {
 	WorkspaceApp,
 } from "api/typesGenerated";
 import { formatDistance, formatDistanceToNow } from "date-fns";
+import { CircleHelpIcon } from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { FC } from "react";
 
@@ -224,7 +224,10 @@ export const AppStatuses: FC<AppStatusesProps> = ({
 							}}
 						>
 							{getStatusIcon(theme, status.state, isLatest) || (
-								<HelpOutline sx={{ fontSize: 18, color: "text.disabled" }} />
+								<CircleHelpIcon
+									className="size-icon-sm"
+									css={{ color: theme.palette.text.disabled }}
+								/>
 							)}
 						</div>
 

site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx

@@ -1,4 +1,3 @@
-import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import Button from "@mui/material/Button";
 import { API } from "api/api";
 import { isApiValidationError } from "api/errors";
@@ -9,6 +8,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Loader } from "components/Loader/Loader";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
+import { ExternalLinkIcon } from "lucide-react";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery } from "react-query";
@@ -143,7 +143,7 @@ export const WorkspaceParametersPageView: FC<
 							<Button
 								component="a"
 								href={docs("/admin/templates/extending-templates/parameters")}
-								startIcon={<OpenInNewOutlined />}
+								startIcon={<ExternalLinkIcon className="size-icon-xs" />}
 								variant="contained"
 								target="_blank"
 								rel="noreferrer"

site/src/pages/WorkspacesPage/WorkspacesButton.tsx

@@ -1,4 +1,3 @@
-import OpenIcon from "@mui/icons-material/OpenInNewOutlined";
 import Link from "@mui/material/Link";
 import type { Template } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
@@ -12,6 +11,7 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
+import { ExternalLinkIcon } from "lucide-react";
 import { ChevronDownIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { type FC, type ReactNode, useState } from "react";
@@ -112,7 +112,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 							color: theme.palette.primary.main,
 						})}
 					>
-						<OpenIcon css={{ width: 14, height: 14 }} />
+						<ExternalLinkIcon className="size-icon-xs" />
 						<span>See all templates</span>
 					</PopoverLink>
 				</div>