From 0060dee2228cbed88e694e2e880fd165ca720866 Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Tue, 7 Apr 2026 01:38:21 +1000
Subject: [PATCH] fix: remove all mui `<IconButton />` instances (#24045)

This pull-request removes all instances of `<IconButton />` being
imported from `@mui/material/IconButton`. This means that we've removed
one whole dependency from MUI and replaced all instances with the local
variant.
---
 site/src/components/FileUpload/FileUpload.tsx | 11 ++++++---
 site/src/components/FullPageLayout/Topbar.tsx | 17 ++++++++-----
 .../modules/provisioners/ProvisionerTag.tsx   | 11 +++++----
 site/src/modules/resources/ResourceCard.tsx   |  9 +++----
 site/src/modules/resources/SensitiveValue.tsx | 11 +++++----
 .../CreateTemplatePage/BuildLogsDrawer.tsx    |  7 +++---
 site/src/pages/HealthPage/HealthLayout.tsx    |  9 +++----
 site/src/pages/IconsPage/IconsPage.tsx        |  9 +++----
 .../TemplateVersionEditor.tsx                 | 24 +++++++++++--------
 .../TokensPage/TokensPageView.tsx             |  9 +++----
 .../pages/WorkspacePage/WorkspaceTopbar.tsx   |  6 +++--
 site/vite.config.mts                          |  1 -
 12 files changed, 72 insertions(+), 52 deletions(-)

diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
index 391e75f362..f23ece0d81 100644
--- a/site/src/components/FileUpload/FileUpload.tsx
+++ b/site/src/components/FileUpload/FileUpload.tsx
@@ -1,8 +1,8 @@
 import { css, type Interpolation, type Theme } from "@emotion/react";
 import CircularProgress from "@mui/material/CircularProgress";
-import IconButton from "@mui/material/IconButton";
 import { CloudUploadIcon, FolderIcon, TrashIcon } from "lucide-react";
 import { type DragEvent, type FC, type ReactNode, useRef } from "react";
+import { Button } from "#/components/Button/Button";
 import { Stack } from "#/components/Stack/Stack";
 import { useClickable } from "#/hooks/useClickable";
 
@@ -46,9 +46,14 @@ export const FileUpload: FC<FileUploadProps> = ({
 					<span>{file.name}</span>
 				</Stack>
 
-				<IconButton title={removeLabel} size="small" onClick={onRemove}>
+				<Button
+					variant="subtle"
+					size="icon-lg"
+					onClick={onRemove}
+					title={removeLabel}
+				>
 					<TrashIcon className="size-icon-sm" />
-				</IconButton>
+				</Button>
 			</Stack>
 		);
 	}
diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
index b73d2133ff..f687051fdd 100644
--- a/site/src/components/FullPageLayout/Topbar.tsx
+++ b/site/src/components/FullPageLayout/Topbar.tsx
@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
 import {
 	cloneElement,
 	type FC,
@@ -26,15 +25,21 @@ export const Topbar: FC<HTMLAttributes<HTMLElement>> = ({
 	);
 };
 
-export const TopbarIconButton = (({ className, ...props }: IconButtonProps) => {
+type TopbarIconButtonProps = ButtonProps;
+
+export const TopbarIconButton = ({
+	className,
+	...props
+}: TopbarIconButtonProps) => {
 	return (
-		<IconButton
+		<Button
 			{...props}
-			size="small"
-			className={cn("p-0 rounded-none size-12 [&_svg]:size-icon-sm", className)}
+			size="icon-lg"
+			variant="subtle"
+			className={cn("p-0 rounded-none size-12", className)}
 		/>
 	);
-}) as typeof IconButton;
+};
 
 export const TopbarButton: React.FC<ButtonProps> = ({ ...props }) => {
 	return <Button variant="outline" size="sm" {...props} />;
diff --git a/site/src/modules/provisioners/ProvisionerTag.tsx b/site/src/modules/provisioners/ProvisionerTag.tsx
index 44e4d4c1fd..3ad4562d82 100644
--- a/site/src/modules/provisioners/ProvisionerTag.tsx
+++ b/site/src/modules/provisioners/ProvisionerTag.tsx
@@ -1,7 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import IconButton from "@mui/material/IconButton";
 import { CircleCheckIcon, CircleMinusIcon, TagIcon, XIcon } from "lucide-react";
 import type { ComponentProps, FC } from "react";
+import { Button } from "#/components/Button/Button";
 import { Pill } from "#/components/Pill/Pill";
 
 const parseBool = (s: string): { valid: boolean; value: boolean } => {
@@ -41,16 +41,17 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
 	const content = onDelete ? (
 		<>
 			{kv}
-			<IconButton
-				size="small"
-				color="secondary"
+			<Button
+				size="icon"
+				variant="subtle"
 				onClick={() => {
 					onDelete(tagName);
 				}}
+				className="size-6"
 			>
 				<XIcon className="size-icon-xs" />
 				<span className="sr-only">Delete {tagName}</span>
-			</IconButton>
+			</Button>
 		</>
 	) : (
 		kv
diff --git a/site/src/modules/resources/ResourceCard.tsx b/site/src/modules/resources/ResourceCard.tsx
index 8aa0dcdd2c..5beeb8f8ca 100644
--- a/site/src/modules/resources/ResourceCard.tsx
+++ b/site/src/modules/resources/ResourceCard.tsx
@@ -1,8 +1,8 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import IconButton from "@mui/material/IconButton";
 import { Children, type FC, type JSX, useState } from "react";
 import type { WorkspaceAgent, WorkspaceResource } from "#/api/typesGenerated";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
+import { Button } from "#/components/Button/Button";
 import { CopyableValue } from "#/components/CopyableValue/CopyableValue";
 import { MemoizedInlineMarkdown } from "#/components/Markdown/Markdown";
 import { Stack } from "#/components/Stack/Stack";
@@ -165,14 +165,15 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
 				{mLength > 4 && (
 					<Tooltip>
 						<TooltipTrigger asChild>
-							<IconButton
+							<Button
 								onClick={() => {
 									setShouldDisplayAllMetadata((value) => !value);
 								}}
-								size="large"
+								size="icon-lg"
+								variant="subtle"
 							>
 								<ChevronDownIcon open={shouldDisplayAllMetadata} />
-							</IconButton>
+							</Button>
 						</TooltipTrigger>
 						<TooltipContent side="bottom">
 							{shouldDisplayAllMetadata ? "Hide metadata" : "Show all metadata"}
diff --git a/site/src/modules/resources/SensitiveValue.tsx b/site/src/modules/resources/SensitiveValue.tsx
index 576b2464d0..a3d3a9f439 100644
--- a/site/src/modules/resources/SensitiveValue.tsx
+++ b/site/src/modules/resources/SensitiveValue.tsx
@@ -1,6 +1,6 @@
-import IconButton from "@mui/material/IconButton";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { type FC, useState } from "react";
+import { Button } from "#/components/Button/Button";
 import { CopyableValue } from "#/components/CopyableValue/CopyableValue";
 import {
 	Tooltip,
@@ -32,16 +32,17 @@ export const SensitiveValue: FC<SensitiveValueProps> = ({ value }) => {
 			</CopyableValue>
 			<Tooltip>
 				<TooltipTrigger asChild>
-					<IconButton
-						className="text-inherit"
+					<Button
 						onClick={() => {
 							setShouldDisplay((value) => !value);
 						}}
-						size="small"
+						size="icon"
+						variant="subtle"
+						className="size-6"
 						aria-label={buttonLabel}
 					>
 						{icon}
-					</IconButton>
+					</Button>
 				</TooltipTrigger>
 				<TooltipContent side="bottom">{buttonLabel}</TooltipContent>
 			</Tooltip>
diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
index df46f1e552..72626a2833 100644
--- a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
+++ b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Drawer from "@mui/material/Drawer";
-import IconButton from "@mui/material/IconButton";
 import { TriangleAlertIcon, XIcon } from "lucide-react";
 import type { FC } from "react";
 import { JobError } from "#/api/queries/templates";
@@ -43,10 +42,10 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 			<div css={styles.root}>
 				<header css={styles.header}>
 					<h3 css={styles.title}>Creating template...</h3>
-					<IconButton size="small" onClick={drawerProps.onClose}>
-						<XIcon className="size-icon-sm" />
+					<Button size="icon-lg" variant="subtle" onClick={drawerProps.onClose}>
+						<XIcon />
 						<span className="sr-only">Close build logs</span>
-					</IconButton>
+					</Button>
 				</header>
 
 				{isMissingVariables ? (
diff --git a/site/src/pages/HealthPage/HealthLayout.tsx b/site/src/pages/HealthPage/HealthLayout.tsx
index 5ab4363cc2..76aaab07cd 100644
--- a/site/src/pages/HealthPage/HealthLayout.tsx
+++ b/site/src/pages/HealthPage/HealthLayout.tsx
@@ -1,5 +1,4 @@
 import CircularProgress from "@mui/material/CircularProgress";
-import IconButton from "@mui/material/IconButton";
 import kebabCase from "lodash/fp/kebabCase";
 import { BellOffIcon, RotateCcwIcon } from "lucide-react";
 import { type FC, Suspense } from "react";
@@ -8,6 +7,7 @@ import { NavLink, Outlet } from "react-router";
 import { health, refreshHealth } from "#/api/queries/debug";
 import type { HealthSeverity } from "#/api/typesGenerated";
 import { ErrorAlert } from "#/components/Alert/ErrorAlert";
+import { Button } from "#/components/Button/Button";
 import { Loader } from "#/components/Loader/Loader";
 import {
 	Tooltip,
@@ -82,8 +82,9 @@ export const HealthLayout: FC = () => {
 
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<IconButton
-												size="small"
+											<Button
+												size="icon-lg"
+												variant="subtle"
 												disabled={isRefreshing}
 												data-testid="healthcheck-refresh-button"
 												onClick={() => {
@@ -95,7 +96,7 @@ export const HealthLayout: FC = () => {
 												) : (
 													<RotateCcwIcon className="size-5" />
 												)}
-											</IconButton>
+											</Button>
 										</TooltipTrigger>
 										<TooltipContent side="bottom">
 											Refresh health checks
diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
index 2809ac1553..c0326632e3 100644
--- a/site/src/pages/IconsPage/IconsPage.tsx
+++ b/site/src/pages/IconsPage/IconsPage.tsx
@@ -1,11 +1,11 @@
 import { useTheme } from "@emotion/react";
-import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
 import { SearchIcon, XIcon } from "lucide-react";
 import { type FC, type ReactNode, useMemo, useState } from "react";
 import uFuzzy from "ufuzzy";
+import { Button } from "#/components/Button/Button";
 import { CopyableValue } from "#/components/CopyableValue/CopyableValue";
 import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { Margins } from "#/components/Margins/Margins";
@@ -134,12 +134,13 @@ const IconsPage: FC = () => {
 							<InputAdornment position="end">
 								<Tooltip>
 									<TooltipTrigger asChild>
-										<IconButton
-											size="small"
+										<Button
+											size="icon"
+											variant="subtle"
 											onClick={() => setSearchInputText("")}
 										>
 											<XIcon className="size-icon-xs" />
-										</IconButton>
+										</Button>
 									</TooltipTrigger>
 									<TooltipContent side="bottom">Clear filter</TooltipContent>
 								</Tooltip>
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 2760f8735f..5393f496e3 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -1,4 +1,3 @@
-import IconButton from "@mui/material/IconButton";
 import {
 	ChevronLeftIcon,
 	ExternalLinkIcon,
@@ -222,8 +221,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					<div>
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<TopbarIconButton component={RouterLink} to={templateLink}>
-									<ChevronLeftIcon className="size-icon-sm" />
+								<TopbarIconButton asChild>
+									<RouterLink to={templateLink}>
+										<ChevronLeftIcon />
+									</RouterLink>
 								</TopbarIconButton>
 							</TooltipTrigger>
 							<TooltipContent side="bottom">
@@ -325,15 +326,17 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 							<div className="ml-auto [&_svg]:fill-content-primary">
 								<Tooltip>
 									<TooltipTrigger asChild>
-										<IconButton
+										<Button
+											size="icon"
+											variant="subtle"
 											aria-label="Create File"
 											onClick={(event) => {
 												setCreateFileOpen(true);
 												event.currentTarget.blur();
 											}}
 										>
-											<PlusIcon className="size-icon-xs" />
-										</IconButton>
+											<PlusIcon />
+										</Button>
 									</TooltipTrigger>
 									<TooltipContent>Create File</TooltipContent>
 								</Tooltip>
@@ -484,17 +487,18 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 								)}
 
 								{selectedTab && (
-									<IconButton
+									<Button
+										size="icon"
+										variant="subtle"
 										onClick={() => {
 											setSelectedTab(undefined);
 										}}
 										className={cn(
-											"w-9 h-9 rounded-none",
 											(selectedTab !== "logs" || !gotBuildLogs) && "ml-auto",
 										)}
 									>
-										<XIcon className="size-icon-xs" />
-									</IconButton>
+										<XIcon />
+									</Button>
 								)}
 							</div>
 
diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx
index eb1e93c608..4e18fb5a52 100644
--- a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx
+++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx
@@ -1,11 +1,11 @@
 import { useTheme } from "@emotion/react";
-import IconButton from "@mui/material/IconButton";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { TrashIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import type { APIKeyWithOwner } from "#/api/typesGenerated";
 import { ErrorAlert } from "#/components/Alert/ErrorAlert";
+import { Button } from "#/components/Button/Button";
 import { ChooseOne, Cond } from "#/components/Conditionals/ChooseOne";
 import { Stack } from "#/components/Stack/Stack";
 import {
@@ -110,15 +110,16 @@ export const TokensPageView: FC<TokensPageViewProps> = ({
 
 										<TableCell>
 											<span style={{ color: theme.palette.text.secondary }}>
-												<IconButton
+												<Button
 													onClick={() => {
 														onDelete(token);
 													}}
-													size="medium"
+													size="icon"
+													variant="destructive"
 													aria-label="Delete token"
 												>
 													<TrashIcon className="size-icon-sm" />
-												</IconButton>
+												</Button>
 											</span>
 										</TableCell>
 									</TableRow>
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
index 3055b6f809..f3a05eed3b 100644
--- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -114,8 +114,10 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 		<Topbar className="[grid-area:topbar]">
 			<Tooltip>
 				<TooltipTrigger asChild>
-					<TopbarIconButton component={RouterLink} to="/workspaces">
-						<ChevronLeftIcon className="size-icon-sm" />
+					<TopbarIconButton asChild>
+						<RouterLink to="/workspaces">
+							<ChevronLeftIcon className="size-icon-sm" />
+						</RouterLink>
 					</TopbarIconButton>
 				</TooltipTrigger>
 				<TooltipContent side="bottom">Back to workspaces</TooltipContent>
diff --git a/site/vite.config.mts b/site/vite.config.mts
index 92e2c0ab6b..158a80349f 100644
--- a/site/vite.config.mts
+++ b/site/vite.config.mts
@@ -180,7 +180,6 @@ export default defineConfig({
 			"@mui/material/FormGroup",
 			"@mui/material/FormHelperText",
 			"@mui/material/FormLabel",
-			"@mui/material/IconButton",
 			"@mui/material/InputAdornment",
 			"@mui/material/InputBase",
 			"@mui/material/LinearProgress",