chore: replace MUI icons - 4 (#17748)

1. Replaced CloudUploadOutlined with CloudUploadIcon in FileUpload.tsx
2. Replaced DeleteOutline with TrashIcon in:
    - WorkspaceTopbar.tsx
    - TokensPageView.tsx
    - GroupPage.tsx
3. Replaced FolderOutlined with FolderIcon in FileUpload.tsx

site/src/components/FileUpload/FileUpload.tsx

@@ -1,11 +1,9 @@
 import { type Interpolation, type Theme, css } from "@emotion/react";
-import UploadIcon from "@mui/icons-material/CloudUploadOutlined";
-import RemoveIcon from "@mui/icons-material/DeleteOutline";
-import FileIcon from "@mui/icons-material/FolderOutlined";
 import CircularProgress from "@mui/material/CircularProgress";
 import IconButton from "@mui/material/IconButton";
 import { Stack } from "components/Stack/Stack";
 import { useClickable } from "hooks/useClickable";
+import { CloudUploadIcon, FolderIcon, TrashIcon } from "lucide-react";
 import { type DragEvent, type FC, type ReactNode, useRef } from "react";
 
 export interface FileUploadProps {
@@ -44,12 +42,12 @@ export const FileUpload: FC<FileUploadProps> = ({
 				alignItems="center"
 			>
 				<Stack direction="row" alignItems="center">
-					<FileIcon />
+					<FolderIcon className="size-icon-sm" />
 					<span>{file.name}</span>
 				</Stack>
 
 				<IconButton title={removeLabel} size="small" onClick={onRemove}>
-					<RemoveIcon />
+					<TrashIcon className="size-icon-sm" />
 				</IconButton>
 			</Stack>
 		);
@@ -68,7 +66,7 @@ export const FileUpload: FC<FileUploadProps> = ({
 						{isUploading ? (
 							<CircularProgress size={32} />
 						) : (
-							<UploadIcon css={styles.icon} />
+							<CloudUploadIcon className="size-16" />
 						)}
 					</div>
 
@@ -166,10 +164,6 @@ const styles = {
 		justifyContent: "center",
 	},
 
-	icon: {
-		fontSize: 64,
-	},
-
 	title: {
 		fontSize: 16,
 		lineHeight: "1",

site/src/components/FullPageLayout/Topbar.tsx

@@ -11,6 +11,7 @@ import {
 	cloneElement,
 	forwardRef,
 } from "react";
+import { cn } from "utils/cn";
 
 export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
 	const theme = useTheme();
@@ -89,7 +90,7 @@ type TopbarIconProps = HTMLAttributes<HTMLOrSVGElement>;
 
 export const TopbarIcon = forwardRef<HTMLOrSVGElement, TopbarIconProps>(
 	(props: TopbarIconProps, ref) => {
-		const { children, ...restProps } = props;
+		const { children, className, ...restProps } = props;
 		const theme = useTheme();
 
 		return cloneElement(
@@ -101,7 +102,10 @@ export const TopbarIcon = forwardRef<HTMLOrSVGElement, TopbarIconProps>(
 			{
 				...restProps,
 				ref,
-				className: css({ fontSize: 16, color: theme.palette.text.disabled }),
+				className: cn([
+					css({ fontSize: 16, color: theme.palette.text.disabled }),
+					"size-icon-sm",
+				]),
 			},
 		);
 	},

site/src/pages/GroupsPage/GroupPage.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import DeleteOutline from "@mui/icons-material/DeleteOutline";
 import PersonAdd from "@mui/icons-material/PersonAdd";
 import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
 import LoadingButton from "@mui/lab/LoadingButton";
@@ -51,6 +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 { type FC, useState } from "react";
 import { Helmet } from "react-helmet-async";
@@ -134,7 +134,7 @@ const GroupPage: FC = () => {
 							onClick={() => {
 								setIsDeletingGroup(true);
 							}}
-							startIcon={<DeleteOutline />}
+							startIcon={<TrashIcon className="size-icon-sm" />}
 							css={styles.removeButton}
 						>
 							Delete&hellip;

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

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import IconButton from "@mui/material/IconButton";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -15,6 +14,7 @@ import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { TrashIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 
 dayjs.extend(relativeTime);
@@ -115,7 +115,7 @@ export const TokensPageView: FC<TokensPageViewProps> = ({
 														size="medium"
 														aria-label="Delete token"
 													>
-														<DeleteOutlineIcon />
+														<TrashIcon className="size-icon-sm" />
 													</IconButton>
 												</span>
 											</TableCell>

site/src/pages/WorkspacePage/WorkspaceTopbar.tsx

@@ -1,6 +1,5 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
-import DeleteOutline from "@mui/icons-material/DeleteOutline";
 import QuotaIcon from "@mui/icons-material/MonetizationOnOutlined";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
@@ -18,6 +17,7 @@ import {
 } from "components/FullPageLayout/Topbar";
 import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
 import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
+import { TrashIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge";
@@ -199,7 +199,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 				{shouldDisplayDormantData && (
 					<TopbarData>
 						<TopbarIcon>
-							<DeleteOutline />
+							<TrashIcon />
 						</TopbarIcon>
 						<Link
 							component={RouterLink}