coder · BrunoQuaresma · May 9, 2025 · May 8, 2025 · May 9, 2025 · May 9, 2025
diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -1,8 +1,8 @@
 import { type Interpolation, type Theme, css } from "@emotion/react";
-import Check from "@mui/icons-material/Check";
 import IconButton from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import { useClipboard } from "hooks/useClipboard";
+import { CheckIcon } from "lucide-react";
 import { type ReactNode, forwardRef } from "react";
 import { FileCopyIcon } from "../Icons/FileCopyIcon";
 
@@ -48,7 +48,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
 						onClick={copyToClipboard}
 					>
 						{showCopiedSuccess ? (
-							<Check css={styles.copyIcon} />
+							<CheckIcon css={styles.copyIcon} />
 						) : (
 							<FileCopyIcon css={styles.copyIcon} />
 						)}

diff --git a/site/src/components/DropdownArrow/DropdownArrow.tsx b/site/src/components/DropdownArrow/DropdownArrow.tsx
@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import type { FC } from "react";
 
 interface ArrowProps {
@@ -14,7 +13,7 @@ export const DropdownArrow: FC<ArrowProps> = ({
 	color,
 	close,
 }) => {
-	const Arrow = close ? KeyboardArrowUp : KeyboardArrowDown;
+	const Arrow = close ? ChevronUpIcon : ChevronDownIcon;
 
 	return (
 		<Arrow

diff --git a/site/src/components/DurationField/DurationField.tsx b/site/src/components/DurationField/DurationField.tsx
@@ -1,8 +1,8 @@
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import FormHelperText from "@mui/material/FormHelperText";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
+import { ChevronDownIcon } from "lucide-react";
 import { type FC, useEffect, useReducer } from "react";
 import {
 	type TimeUnit,
@@ -126,7 +126,7 @@ export const DurationField: FC<DurationFieldProps> = (props) => {
 						});
 					}}
 					inputProps={{ "aria-label": "Time unit" }}
-					IconComponent={KeyboardArrowDown}
+					IconComponent={ChevronDownIcon}
 				>
 					<MenuItem value="hours">Hours</MenuItem>
 					<MenuItem

diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx
@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
@@ -15,6 +14,7 @@ import {
 import { InputGroup } from "components/InputGroup/InputGroup";
 import { SearchField } from "components/SearchField/SearchField";
 import { useDebouncedFunction } from "hooks/debounce";
+import { ChevronDownIcon } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
 import type { useSearchParams } from "react-router-dom";
 
@@ -267,7 +267,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
 			<Button
 				onClick={() => setIsOpen(true)}
 				ref={anchorRef}
-				endIcon={<KeyboardArrowDown />}
+				endIcon={<ChevronDownIcon className="size-4" />}
 			>
 				Filters
 			</Button>

diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
@@ -1,6 +1,5 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import CloseIcon from "@mui/icons-material/Close";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import LockIcon from "@mui/icons-material/Lock";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
 import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
@@ -42,6 +41,7 @@ import {
 } from "components/deprecated/Popover/Popover";
 import { type FormikContextType, useFormik } from "formik";
 import { type ClassName, useClassName } from "hooks/useClassName";
+import { ChevronDownIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { type FC, useState } from "react";
 import { useMutation, useQuery } from "react-query";
@@ -82,7 +82,7 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
 					disabled={!portsQuery.data}
 					size="small"
 					variant="text"
-					endIcon={<KeyboardArrowDown />}
+					endIcon={<ChevronDownIcon className="size-4" />}
 					css={{ fontSize: 13, padding: "8px 12px" }}
 					startIcon={
 						portsQuery.data ? (

diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import Button from "@mui/material/Button";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import {
@@ -14,6 +13,7 @@ import {
 	PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
 import { type ClassName, useClassName } from "hooks/useClassName";
+import { ChevronDownIcon } from "lucide-react";
 import type { FC } from "react";
 import { docs } from "utils/docs";
 
@@ -36,7 +36,7 @@ export const AgentSSHButton: FC<AgentSSHButtonProps> = ({
 				<Button
 					size="small"
 					variant="text"
-					endIcon={<KeyboardArrowDown />}
+					endIcon={<ChevronDownIcon className="size-4" />}
 					css={{ fontSize: 13, padding: "8px 12px" }}
 				>
 					Connect via SSH
@@ -98,7 +98,7 @@ export const AgentDevcontainerSSHButton: FC<
 				<Button
 					size="small"
 					variant="text"
-					endIcon={<KeyboardArrowDown />}
+					endIcon={<ChevronDownIcon className="size-4" />}
 					css={{ fontSize: 13, padding: "8px 12px" }}
 				>
 					Connect via SSH

diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
@@ -1,6 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
 import Button from "@mui/material/Button";
 import Collapse from "@mui/material/Collapse";
 import Skeleton from "@mui/material/Skeleton";
@@ -11,6 +9,7 @@ import type {
 } from "api/typesGenerated";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import {
 	type TimeRange,
@@ -102,9 +101,9 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 				onClick={() => setIsOpen((o) => !o)}
 			>
 				{isOpen ? (
-					<KeyboardArrowUp css={{ fontSize: 16, marginRight: 16 }} />
+					<ChevronUpIcon css={{ width: 16, height: 16, marginRight: 16 }} />
 				) : (
-					<KeyboardArrowDown css={{ fontSize: 16, marginRight: 16 }} />
+					<ChevronDownIcon css={{ width: 16, height: 16, marginRight: 16 }} />
 				)}
 				<span>Build timeline</span>
 				<span

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -1,5 +1,4 @@
 import CloudQueue from "@mui/icons-material/CloudQueue";
-import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, Workspace } from "api/typesGenerated";
@@ -19,7 +18,7 @@ import { PaginationHeader } from "components/PaginationWidget/PaginationHeader";
 import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase";
 import { Stack } from "components/Stack/Stack";
 import { TableToolbar } from "components/TableToolbar/TableToolbar";
-import { PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
+import { ChevronDownIcon, PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
 import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
 import type { FC } from "react";
 import type { UseQueryResult } from "react-query";
@@ -142,7 +141,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 									variant="text"
 									size="small"
 									css={{ borderRadius: 9999, marginLeft: "auto" }}
-									endIcon={<KeyboardArrowDownOutlined />}
+									endIcon={<ChevronDownIcon className="size-4" />}
 								>
 									Actions
 								</LoadingButton>

diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -1,4 +1,3 @@
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Star from "@mui/icons-material/Star";
 import Checkbox from "@mui/material/Checkbox";
 import Skeleton from "@mui/material/Skeleton";
@@ -52,6 +51,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useAuthenticated } from "hooks";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
+import { ChevronRightIcon } from "lucide-react";
 import {
 	BanIcon,
 	PlayIcon,
@@ -303,7 +303,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 							/>
 							<TableCell>
 								<div className="flex">
-									<KeyboardArrowRight className="text-content-secondary size-icon-sm" />
+									<ChevronRightIcon className="text-content-secondary size-icon-sm" />
 								</div>
 							</TableCell>
 						</WorkspacesRow>
@@ -385,7 +385,7 @@ const TableLoader: FC<TableLoaderProps> = ({ canCheckWorkspaces }) => {
 				</TableCell>
 				<TableCell>
 					<div className="flex">
-						<KeyboardArrowRight className="text-content-disabled size-icon-sm" />
+						<ChevronRightIcon className="text-content-disabled size-icon-sm" />
 					</div>
 				</TableCell>
 			</TableRowSkeleton>