chore: replace MUI icons with Lucide icons - 12 (#17815)

AddOutlined -> PlusIcon
RemoveOutlined -> TrashIcon
ScheduleOutlined -> ClockIcon

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

@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import AddIcon from "@mui/icons-material/AddOutlined";
 import MuiButton from "@mui/material/Button";
 import MuiLink from "@mui/material/Link";
 import Skeleton from "@mui/material/Skeleton";
@@ -15,7 +14,7 @@ import {
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { useWindowSize } from "hooks/useWindowSize";
-import { RotateCwIcon } from "lucide-react";
+import { PlusIcon, RotateCwIcon } from "lucide-react";
 import type { FC } from "react";
 import Confetti from "react-confetti";
 import { Link } from "react-router-dom";
@@ -76,7 +75,7 @@ const LicensesSettingsPageView: FC<Props> = ({
 					<MuiButton
 						component={Link}
 						to="/deployment/licenses/add"
-						startIcon={<AddIcon />}
+						startIcon={<PlusIcon className="size-icon-sm" />}
 					>
 						Add a license
 					</MuiButton>

site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import AddIcon from "@mui/icons-material/AddOutlined";
 import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Button from "@mui/material/Button";
 import Table from "@mui/material/Table";
@@ -19,6 +18,7 @@ import {
 import { Stack } from "components/Stack/Stack";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
+import { PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
@@ -52,7 +52,7 @@ const OAuth2AppsSettingsPageView: FC<OAuth2AppsSettingsProps> = ({
 				<Button
 					component={Link}
 					to="/deployment/oauth2-provider/apps/add"
-					startIcon={<AddIcon />}
+					startIcon={<PlusIcon className="size-icon-sm" />}
 				>
 					Add application
 				</Button>

site/src/pages/GroupsPage/GroupsPageView.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import AddOutlined from "@mui/icons-material/AddOutlined";
 import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Skeleton from "@mui/material/Skeleton";
 import type { Group } from "api/typesGenerated";
@@ -24,6 +23,7 @@ import {
 	TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
 import { useClickableTableRow } from "hooks";
+import { PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
 import { docs } from "utils/docs";
@@ -81,7 +81,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
 													canCreateGroup && (
 														<Button asChild>
 															<RouterLink to="create">
-																<AddOutlined />
+																<PlusIcon className="size-icon-sm" />
 																Create group
 															</RouterLink>
 														</Button>

site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx

@@ -1,6 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import AddIcon from "@mui/icons-material/AddOutlined";
-import AddOutlined from "@mui/icons-material/AddOutlined";
 import Button from "@mui/material/Button";
 import Skeleton from "@mui/material/Skeleton";
 import type { AssignableRoles, Role } from "api/typesGenerated";
@@ -27,7 +25,7 @@ import {
 	TableLoaderSkeleton,
 	TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
-import { EllipsisVertical } from "lucide-react";
+import { EllipsisVertical, PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
 import { docs } from "utils/docs";
@@ -74,7 +72,11 @@ export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
 					</span>
 				</span>
 				{canCreateOrgRole && isCustomRolesEnabled && (
-					<Button component={RouterLink} startIcon={<AddIcon />} to="create">
+					<Button
+						component={RouterLink}
+						startIcon={<PlusIcon className="size-icon-sm" />}
+						to="create"
+					>
 						Create custom role
 					</Button>
 				)}
@@ -158,7 +160,7 @@ const RoleTable: FC<RoleTableProps> = ({
 											<Button
 												component={RouterLink}
 												to="create"
-												startIcon={<AddOutlined />}
+												startIcon={<PlusIcon className="size-icon-sm" />}
 												variant="contained"
 											>
 												Create custom role

site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import PlusIcon from "@mui/icons-material/AddOutlined";
 import Button from "@mui/material/Button";
 import type { TemplateExample } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -13,7 +12,7 @@ import {
 	PageHeaderTitle,
 } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
-import { ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon, PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link } from "react-router-dom";
 
@@ -58,7 +57,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
 							variant="contained"
 							component={Link}
 							to={`/templates/new?exampleId=${starterTemplate.id}`}
-							startIcon={<PlusIcon />}
+							startIcon={<PlusIcon className="size-icon-sm" />}
 						>
 							Use template
 						</Button>

site/src/pages/TemplatePage/TemplatePageHeader.tsx

@@ -1,4 +1,3 @@
-import AddIcon from "@mui/icons-material/AddOutlined";
 import EditIcon from "@mui/icons-material/EditOutlined";
 import CopyIcon from "@mui/icons-material/FileCopyOutlined";
 import Button from "@mui/material/Button";
@@ -28,9 +27,12 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
-import { SettingsIcon } from "lucide-react";
-import { TrashIcon } from "lucide-react";
-import { EllipsisVertical } from "lucide-react";
+import {
+	EllipsisVertical,
+	PlusIcon,
+	SettingsIcon,
+	TrashIcon,
+} from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import type { WorkspacePermissions } from "modules/permissions/workspaces";
 import type { FC } from "react";
@@ -190,7 +192,7 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
 							workspacePermissions.createWorkspaceForUserID && (
 								<Button
 									variant="contained"
-									startIcon={<AddIcon />}
+									startIcon={<PlusIcon className="size-icon-sm" />}
 									component={RouterLink}
 									to={`${templateLink}/workspace`}
 								>

site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import CreateIcon from "@mui/icons-material/AddOutlined";
 import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
 import WarningOutlined from "@mui/icons-material/WarningOutlined";
 import Button from "@mui/material/Button";
@@ -26,7 +25,7 @@ import {
 } from "components/FullPageLayout/Topbar";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
-import { PlayIcon, XIcon } from "lucide-react";
+import { PlayIcon, PlusIcon, XIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
 import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
@@ -360,7 +359,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 											event.currentTarget.blur();
 										}}
 									>
-										<CreateIcon css={{ width: 16, height: 16 }} />
+										<PlusIcon className="size-icon-xs" />
 									</IconButton>
 								</Tooltip>
 							</div>

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

@@ -1,8 +1,8 @@
 import { type Interpolation, type Theme, css } from "@emotion/react";
-import AddIcon from "@mui/icons-material/AddOutlined";
 import Button from "@mui/material/Button";
 import type { APIKeyWithOwner } from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
+import { PlusIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { Section } from "../Section";
@@ -65,7 +65,11 @@ const TokensPage: FC = () => {
 
 const TokenActions: FC = () => (
 	<Stack direction="row" justifyContent="end" css={{ marginBottom: 8 }}>
-		<Button startIcon={<AddIcon />} component={RouterLink} to="new">
+		<Button
+			startIcon={<PlusIcon className="size-icon-sm" />}
+			component={RouterLink}
+			to="new"
+		>
 			Add token
 		</Button>
 	</Stack>

site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx

@@ -1,7 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import AddIcon from "@mui/icons-material/AddOutlined";
-import RemoveIcon from "@mui/icons-material/RemoveOutlined";
-import ScheduleOutlined from "@mui/icons-material/ScheduleOutlined";
 import IconButton from "@mui/material/IconButton";
 import Link, { type LinkProps } from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
@@ -16,6 +13,7 @@ import { TopbarData, TopbarIcon } from "components/FullPageLayout/Topbar";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import dayjs, { type Dayjs } from "dayjs";
 import { useTime } from "hooks/useTime";
+import { ClockIcon, MinusIcon, PlusIcon } from "lucide-react";
 import { getWorkspaceActivityStatus } from "modules/workspaces/activity";
 import { type FC, type ReactNode, forwardRef, useRef, useState } from "react";
 import { useMutation, useQueryClient } from "react-query";
@@ -41,7 +39,7 @@ const WorkspaceScheduleContainer: FC<WorkspaceScheduleContainerProps> = ({
 }) => {
 	const icon = (
 		<TopbarIcon>
-			<ScheduleOutlined aria-label="Schedule" />
+			<ClockIcon aria-label="Schedule" className="size-icon-sm" />
 		</TopbarIcon>
 	);
 
@@ -211,7 +209,7 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 						handleDeadlineChange(deadline.subtract(1, "h"));
 					}}
 				>
-					<RemoveIcon />
+					<MinusIcon className="size-icon-xs" />
 					<span style={visuallyHidden}>Subtract 1 hour</span>
 				</IconButton>
 			</Tooltip>
@@ -224,7 +222,7 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 						handleDeadlineChange(deadline.add(1, "h"));
 					}}
 				>
-					<AddIcon />
+					<PlusIcon className="size-icon-xs" />
 					<span style={visuallyHidden}>Add 1 hour</span>
 				</IconButton>
 			</Tooltip>