chore: replace MUI icons with Lucide icons - 9 (#17796)

OpenInNew -> ExternalLinkIcon
KeyboardArrowLeft -> ChevronLeftIcon
KeyboardArrowRight -> ChevronRightIcon
Settings -> SettingsIcon

site/src/components/HelpTooltip/HelpTooltip.tsx

@@ -5,7 +5,6 @@ import {
 	css,
 	useTheme,
 } from "@emotion/react";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import Link from "@mui/material/Link";
 import { Stack } from "components/Stack/Stack";
 import {
@@ -16,6 +15,7 @@ import {
 	PopoverTrigger,
 	usePopover,
 } from "components/deprecated/Popover/Popover";
+import { ExternalLinkIcon } from "lucide-react";
 import { CircleHelpIcon } from "lucide-react";
 import {
 	type FC,
@@ -137,7 +137,7 @@ interface HelpTooltipLink {
 export const HelpTooltipLink: FC<HelpTooltipLink> = ({ children, href }) => {
 	return (
 		<Link href={href} target="_blank" rel="noreferrer" css={styles.link}>
-			<OpenInNewIcon css={styles.linkIcon} />
+			<ExternalLinkIcon className="size-icon-xs" css={styles.linkIcon} />
 			{children}
 		</Link>
 	);

site/src/components/PaginationWidget/PaginationWidgetBase.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@emotion/react";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import type { FC } from "react";
 import { NumberedPageButton, PlaceholderPageButton } from "./PageButtons";
 import { PaginationNavButton } from "./PaginationNavButton";
@@ -60,7 +59,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
 					}
 				}}
 			>
-				<KeyboardArrowLeft />
+				<ChevronLeftIcon className="size-icon-sm" />
 			</PaginationNavButton>
 
 			{isMobile ? (
@@ -87,7 +86,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
 					}
 				}}
 			>
-				<KeyboardArrowRight />
+				<ChevronRightIcon className="size-icon-sm" />
 			</PaginationNavButton>
 		</div>
 	);

site/src/components/RichParameterInput/RichParameterInput.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import SettingsIcon from "@mui/icons-material/Settings";
 import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormHelperText from "@mui/material/FormHelperText";
@@ -13,6 +12,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { SettingsIcon } from "lucide-react";
 import { CircleAlertIcon } from "lucide-react";
 import { type FC, type ReactNode, useState } from "react";
 import type {
@@ -153,7 +153,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
 			)}
 			{isPreset && (
 				<Tooltip title="This value was set by a preset">
-					<Pill type="info" icon={<SettingsIcon />}>
+					<Pill type="info" icon={<SettingsIcon className="size-icon-xs" />}>
 						Preset
 					</Pill>
 				</Tooltip>

site/src/pages/GroupsPage/GroupPage.tsx

@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import PersonAdd from "@mui/icons-material/PersonAdd";
-import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Button from "@mui/material/Button";
 import { getErrorMessage } from "api/errors";
@@ -50,6 +49,7 @@ import {
 	TableToolbar,
 } from "components/TableToolbar/TableToolbar";
 import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
+import { SettingsIcon } from "lucide-react";
 import { EllipsisVertical, TrashIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Helmet } from "react-helmet-async";
@@ -123,7 +123,7 @@ const GroupPage: FC = () => {
 					<Stack direction="row" spacing={2}>
 						<Button
 							component={RouterLink}
-							startIcon={<SettingsOutlined />}
+							startIcon={<SettingsIcon className="size-icon-sm" />}
 							to="settings"
 						>
 							Settings

site/src/pages/TemplateSettingsPage/Sidebar.tsx

@@ -1,5 +1,4 @@
 import VariablesIcon from "@mui/icons-material/CodeOutlined";
-import GeneralIcon from "@mui/icons-material/SettingsOutlined";
 import ScheduleIcon from "@mui/icons-material/TimerOutlined";
 import type { Template } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
@@ -8,6 +7,7 @@ import {
 	SidebarHeader,
 	SidebarNavItem,
 } from "components/Sidebar/Sidebar";
+import { SettingsIcon } from "lucide-react";
 import { LockIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import type { FC } from "react";
@@ -32,7 +32,7 @@ export const Sidebar: FC<SidebarProps> = ({ template }) => {
 				subtitle={template.name}
 			/>
 
-			<SidebarNavItem href="" icon={GeneralIcon}>
+			<SidebarNavItem href="" icon={SettingsIcon}>
 				General
 			</SidebarNavItem>
 			<SidebarNavItem href="permissions" icon={LockIcon}>

site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx

@@ -1,7 +1,6 @@
 import DownloadOutlined from "@mui/icons-material/DownloadOutlined";
 import DuplicateIcon from "@mui/icons-material/FileCopyOutlined";
 import HistoryIcon from "@mui/icons-material/HistoryOutlined";
-import SettingsIcon from "@mui/icons-material/SettingsOutlined";
 import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import {
@@ -12,6 +11,7 @@ import {
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import { useAuthenticated } from "hooks/useAuthenticated";
+import { SettingsIcon } from "lucide-react";
 import { TrashIcon } from "lucide-react";
 import { EllipsisVertical } from "lucide-react";
 import {
@@ -196,7 +196,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
 
 				<DropdownMenuContent id="workspace-options" align="end">
 					<DropdownMenuItem onClick={handleSettings}>
-						<SettingsIcon />
+						<SettingsIcon className="size-icon-sm" />
 						Settings
 					</DropdownMenuItem>