chore: replace MUI icons - 3 (#17733)

1. Replaced TaskAlt with CircleCheckBigIcon in:
   - Paywall.tsx
   - PopoverPaywall.tsx
  
2. Replaced InfoOutlined with InfoIcon in:
   - ChangeVersionDialog.tsx
   - WorkspaceNotifications.tsx
   - Pill.stories.tsx
   
3. Replaced ErrorOutline/ErrorOutlineIcon with CircleAlertIcon in:
   - workspace.tsx
   - WorkspaceStatusBadge.tsx
   - AppLink.tsx

site/src/components/Paywall/Paywall.tsx

@@ -1,9 +1,9 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import TaskAltIcon from "@mui/icons-material/TaskAlt";
 import Link from "@mui/material/Link";
 import { PremiumBadge } from "components/Badges/Badges";
 import { Button } from "components/Button/Button";
 import { Stack } from "components/Stack/Stack";
+import { CircleCheckBigIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 
 export interface PaywallProps {
@@ -73,7 +73,9 @@ export const Paywall: FC<PaywallProps> = ({
 
 const FeatureIcon: FC = () => {
 	return (
-		<TaskAltIcon
+		<CircleCheckBigIcon
+			aria-hidden="true"
+			className="size-icon-sm"
 			css={[
 				(theme) => ({
 					color: theme.branding.premium.border,

site/src/components/Paywall/PopoverPaywall.tsx

@@ -1,9 +1,9 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import TaskAltIcon from "@mui/icons-material/TaskAlt";
 import Link from "@mui/material/Link";
 import { PremiumBadge } from "components/Badges/Badges";
 import { Button } from "components/Button/Button";
 import { Stack } from "components/Stack/Stack";
+import { CircleCheckBigIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 
 export interface PopoverPaywallProps {
@@ -77,7 +77,9 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 
 const FeatureIcon: FC = () => {
 	return (
-		<TaskAltIcon
+		<CircleCheckBigIcon
+			aria-hidden="true"
+			className="size-icon-sm"
 			css={[
 				(theme) => ({
 					color: theme.branding.premium.border,

site/src/components/Pill/Pill.stories.tsx

@@ -1,5 +1,5 @@
-import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import type { Meta, StoryObj } from "@storybook/react";
+import { InfoIcon } from "lucide-react";
 import { Pill, PillSpinner } from "./Pill";
 
 const meta: Meta<typeof Pill> = {
@@ -68,7 +68,7 @@ export const WithIcon: Story = {
 	args: {
 		children: "Information",
 		type: "info",
-		icon: <InfoOutlined />,
+		icon: <InfoIcon aria-hidden="true" className="size-icon-sm" />,
 	},
 };
 

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

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import type * as TypesGen from "api/typesGenerated";
 import { Spinner } from "components/Spinner/Spinner";
 import {
@@ -9,6 +8,7 @@ import {
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useProxy } from "contexts/ProxyContext";
+import { CircleAlertIcon } from "lucide-react";
 import { isExternalApp, needsSessionToken } from "modules/apps/apps";
 import { useAppLink } from "modules/apps/useAppLink";
 import { type FC, useState } from "react";
@@ -54,13 +54,25 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
 	}
 
 	if (app.health === "unhealthy") {
-		icon = <ErrorOutlineIcon css={{ color: theme.palette.warning.light }} />;
+		icon = (
+			<CircleAlertIcon
+				aria-hidden="true"
+				className="size-icon-sm"
+				css={{ color: theme.palette.warning.light }}
+			/>
+		);
 		primaryTooltip = "Unhealthy";
 	}
 
 	if (!host && app.subdomain) {
 		canClick = false;
-		icon = <ErrorOutlineIcon css={{ color: theme.palette.grey[300] }} />;
+		icon = (
+			<CircleAlertIcon
+				aria-hidden="true"
+				className="size-icon-sm"
+				css={{ color: theme.palette.grey[300] }}
+			/>
+		);
 		primaryTooltip =
 			"Your admin has not configured subdomain application access";
 	}

site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

@@ -1,4 +1,3 @@
-import ErrorOutline from "@mui/icons-material/ErrorOutline";
 import Tooltip, {
 	type TooltipProps,
 	tooltipClasses,
@@ -7,6 +6,7 @@ import type { Workspace } from "api/typesGenerated";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { Pill } from "components/Pill/Pill";
 import { useClassName } from "hooks/useClassName";
+import { CircleAlertIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
 
@@ -31,10 +31,10 @@ export const WorkspaceStatusBadge: FC<WorkspaceStatusBadgeProps> = ({
 				<FailureTooltip
 					title={
 						<div css={{ display: "flex", alignItems: "center", gap: 10 }}>
-							<ErrorOutline
+							<CircleAlertIcon
+								aria-hidden="true"
+								className="size-icon-xs"
 								css={(theme) => ({
-									width: 14,
-									height: 14,
 									color: theme.palette.error.light,
 								})}
 							/>

site/src/pages/WorkspacePage/ChangeVersionDialog.tsx

@@ -1,5 +1,4 @@
 import { css } from "@emotion/css";
-import InfoIcon from "@mui/icons-material/InfoOutlined";
 import AlertTitle from "@mui/material/AlertTitle";
 import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -14,6 +13,7 @@ import { FormFields } from "components/Form/Form";
 import { Loader } from "components/Loader/Loader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { InfoIcon } from "lucide-react";
 import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
 import { type FC, useRef, useState } from "react";
 import { createDayString } from "utils/createDayString";
@@ -106,7 +106,10 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
 														>
 															{option.name}
 															{option.message && (
-																<InfoIcon css={{ width: 12, height: 12 }} />
+																<InfoIcon
+																	aria-hidden="true"
+																	className="size-icon-xs"
+																/>
 															)}
 														</Stack>
 														{template?.active_version_id === option.id && (

site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import WarningRounded from "@mui/icons-material/WarningRounded";
 import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
 import type {
@@ -11,6 +10,7 @@ import type {
 import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import dayjs from "dayjs";
+import { InfoIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
 import { type FC, useEffect, useState } from "react";
@@ -251,7 +251,7 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
 				<Notifications
 					items={infoNotifications}
 					severity="info"
-					icon={<InfoOutlined />}
+					icon={<InfoIcon aria-hidden="true" className="size-icon-sm" />}
 				/>
 			)}
 

site/src/utils/workspace.tsx

@@ -1,5 +1,4 @@
 import type { Theme } from "@emotion/react";
-import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import QueuedIcon from "@mui/icons-material/HourglassEmpty";
 import type * as TypesGen from "api/typesGenerated";
 import { PillSpinner } from "components/Pill/Pill";
@@ -7,7 +6,7 @@ import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import minMax from "dayjs/plugin/minMax";
 import utc from "dayjs/plugin/utc";
-import { PlayIcon, SquareIcon } from "lucide-react";
+import { CircleAlertIcon, PlayIcon, SquareIcon } from "lucide-react";
 import semver from "semver";
 import { getPendingStatusLabel } from "./provisionerJob";
 
@@ -226,7 +225,7 @@ export const getDisplayWorkspaceStatus = (
 			return {
 				type: "danger",
 				text: "Deleted",
-				icon: <ErrorIcon />,
+				icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
 			} as const;
 		case "canceling":
 			return {
@@ -238,13 +237,13 @@ export const getDisplayWorkspaceStatus = (
 			return {
 				type: "inactive",
 				text: "Canceled",
-				icon: <ErrorIcon />,
+				icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
 			} as const;
 		case "failed":
 			return {
 				type: "error",
 				text: "Failed",
-				icon: <ErrorIcon />,
+				icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
 			} as const;
 		case "pending":
 			return {