chore: replace MUI icons with Lucide icons - 10 (#17797)

CloseOutlined -> XIcon
SearchOutlined -> SearchIcon
Refresh -> RotateCwIcon
Build -> WrenchIcon

site/src/components/Search/Search.tsx

@@ -1,8 +1,8 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import SearchOutlined from "@mui/icons-material/SearchOutlined";
 // biome-ignore lint/nursery/noRestrictedImports: use it to have the component prop
 import Box, { type BoxProps } from "@mui/material/Box";
 import visuallyHidden from "@mui/utils/visuallyHidden";
+import { SearchIcon } from "lucide-react";
 import type { FC, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
 
 interface SearchProps extends Omit<BoxProps, "ref"> {
@@ -21,7 +21,7 @@ interface SearchProps extends Omit<BoxProps, "ref"> {
 export const Search: FC<SearchProps> = ({ children, $$ref, ...boxProps }) => {
 	return (
 		<Box ref={$$ref} {...boxProps} css={SearchStyles.container}>
-			<SearchOutlined css={SearchStyles.icon} />
+			<SearchIcon className="size-icon-xs" css={SearchStyles.icon} />
 			{children}
 		</Box>
 	);

site/src/components/SearchField/SearchField.tsx

@@ -1,11 +1,10 @@
 import { useTheme } from "@emotion/react";
-import CloseIcon from "@mui/icons-material/CloseOutlined";
-import SearchIcon from "@mui/icons-material/SearchOutlined";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import visuallyHidden from "@mui/utils/visuallyHidden";
+import { SearchIcon, XIcon } from "lucide-react";
 import { type FC, useEffect, useRef } from "react";
 
 export type SearchFieldProps = Omit<TextFieldProps, "onChange"> & {
@@ -41,8 +40,8 @@ export const SearchField: FC<SearchFieldProps> = ({
 				startAdornment: (
 					<InputAdornment position="start">
 						<SearchIcon
+							className="size-icon-xs"
 							css={{
-								fontSize: 16,
 								color: theme.palette.text.secondary,
 							}}
 						/>
@@ -57,7 +56,7 @@ export const SearchField: FC<SearchFieldProps> = ({
 									onChange("");
 								}}
 							>
-								<CloseIcon css={{ fontSize: 14 }} />
+								<XIcon className="size-icon-xs" />
 								<span css={{ ...visuallyHidden }}>Clear search</span>
 							</IconButton>
 						</Tooltip>

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

@@ -1,10 +1,8 @@
 import type { CSSInterpolation } from "@emotion/css/dist/declarations/src/create-instance";
 import { type Interpolation, type Theme, css, useTheme } from "@emotion/react";
-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 RefreshIcon from "@mui/icons-material/Refresh";
 import LatencyIcon from "@mui/icons-material/SettingsEthernet";
 import WebTerminalIcon from "@mui/icons-material/WebAsset";
 import Button from "@mui/material/Button";
@@ -23,6 +21,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 { RotateCwIcon, WrenchIcon } from "lucide-react";
 import { CircleAlertIcon } from "lucide-react";
 import prettyBytes from "pretty-bytes";
 import {
@@ -322,7 +321,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 						}}
 						variant="text"
 					>
-						<RefreshIcon />
+						<RotateCwIcon className="size-icon-xs" />
 						{timeUntilRefresh}s
 					</Button>
 				</Tooltip>
@@ -344,7 +343,7 @@ const WorkspaceBuildValue: FC<WorkspaceBuildValueProps> = ({
 	let statusText = displayStatus.text;
 	let icon = displayStatus.icon;
 	if (status === "starting") {
-		icon = <BuildingIcon />;
+		icon = <WrenchIcon className="size-icon-xs" />;
 		statusText = "Building";
 	}
 

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx

@@ -1,6 +1,5 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import AddIcon from "@mui/icons-material/AddOutlined";
-import RefreshIcon from "@mui/icons-material/Refresh";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Button from "@mui/material/Button";
 import MuiLink from "@mui/material/Link";
@@ -15,6 +14,7 @@ import {
 } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import { useWindowSize } from "hooks/useWindowSize";
+import { RotateCwIcon } from "lucide-react";
 import type { FC } from "react";
 import Confetti from "react-confetti";
 import { Link } from "react-router-dom";
@@ -84,7 +84,7 @@ const LicensesSettingsPageView: FC<Props> = ({
 							loadingPosition="start"
 							loading={isRefreshing}
 							onClick={refreshEntitlements}
-							startIcon={<RefreshIcon />}
+							startIcon={<RotateCwIcon className="size-icon-xs" />}
 						>
 							Refresh
 						</LoadingButton>

site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx

@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import RefreshIcon from "@mui/icons-material/Refresh";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import type { ApiErrorResponse } from "api/errors";
@@ -10,6 +9,7 @@ import { Avatar } from "components/Avatar/Avatar";
 import { GitDeviceAuth } from "components/GitDeviceAuth/GitDeviceAuth";
 import { SignInLayout } from "components/SignInLayout/SignInLayout";
 import { Welcome } from "components/Welcome/Welcome";
+import { RotateCwIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 
 export interface ExternalAuthPageViewProps {
@@ -132,7 +132,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
 						onReauthenticate();
 					}}
 				>
-					<RefreshIcon /> Reauthenticate
+					<RotateCwIcon className="size-icon-xs" /> Reauthenticate
 				</Link>
 			</div>
 		</SignInLayout>

site/src/pages/IconsPage/IconsPage.tsx

@@ -1,6 +1,4 @@
 import { useTheme } from "@emotion/react";
-import ClearIcon from "@mui/icons-material/CloseOutlined";
-import SearchIcon from "@mui/icons-material/SearchOutlined";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import Link from "@mui/material/Link";
@@ -15,6 +13,7 @@ import {
 	PageHeaderTitle,
 } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
+import { SearchIcon, XIcon } from "lucide-react";
 import { type FC, type ReactNode, useMemo, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import {
@@ -129,8 +128,8 @@ const IconsPage: FC = () => {
 						startAdornment: (
 							<InputAdornment position="start">
 								<SearchIcon
+									className="size-icon-xs"
 									css={{
-										fontSize: 14,
 										color: theme.palette.text.secondary,
 									}}
 								/>
@@ -143,7 +142,7 @@ const IconsPage: FC = () => {
 										size="small"
 										onClick={() => setSearchInputText("")}
 									>
-										<ClearIcon css={{ fontSize: 14 }} />
+										<XIcon className="size-icon-xs" />
 									</IconButton>
 								</Tooltip>
 							</InputAdornment>

site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

@@ -1,7 +1,6 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import CreateIcon from "@mui/icons-material/AddOutlined";
 import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
-import CloseOutlined from "@mui/icons-material/CloseOutlined";
 import WarningOutlined from "@mui/icons-material/WarningOutlined";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
@@ -27,7 +26,7 @@ import {
 } from "components/FullPageLayout/Topbar";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
-import { PlayIcon } from "lucide-react";
+import { PlayIcon, XIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
 import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
@@ -567,7 +566,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 											borderRadius: 0,
 										}}
 									>
-										<CloseOutlined css={{ width: 16, height: 16 }} />
+										<XIcon className="size-icon-xs" />
 									</IconButton>
 								)}
 							</div>