chore: unified icon style

src/components/base/base-notice.tsx

@@ -1,7 +1,11 @@
 import { createRoot } from "react-dom/client";
 import { ReactNode, useState, useEffect } from "react";
 import { Box, IconButton, Slide, Snackbar, Typography } from "@mui/material";
-import { Close, CheckCircleRounded, ErrorRounded } from "@mui/icons-material";
+import {
+  CloseRounded,
+  CheckCircleRounded,
+  ErrorRounded,
+} from "@mui/icons-material";
 import { useVerge } from "@/hooks/use-verge";
 import { appWindow } from "@tauri-apps/api/window";
 interface InnerProps {
@@ -81,7 +85,7 @@ const NoticeInner = (props: InnerProps) => {
       transitionDuration={200}
       action={
         <IconButton size="small" color="inherit" onClick={onBtnClose}>
-          <Close fontSize="inherit" />
+          <CloseRounded fontSize="inherit" />
         </IconButton>
       }
     />

src/components/layout/layout-traffic.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from "react";
 import { Box, Typography } from "@mui/material";
 import {
-  ArrowDownward,
-  ArrowUpward,
-  MemoryOutlined,
+  ArrowDownwardRounded,
+  ArrowUpwardRounded,
+  MemoryRounded,
 } from "@mui/icons-material";
 import { useClashInfo } from "@/hooks/use-clash";
 import { useVerge } from "@/hooks/use-verge";
@@ -153,7 +153,7 @@ export const LayoutTraffic = () => {
 
       <Box display="flex" flexDirection="column" gap={0.75}>
         <Box title={t("Upload Speed")} {...boxStyle}>
-          <ArrowUpward
+          <ArrowUpwardRounded
             {...iconStyle}
             color={+up > 0 ? "secondary" : "disabled"}
           />
@@ -164,7 +164,7 @@ export const LayoutTraffic = () => {
         </Box>
 
         <Box title={t("Download Speed")} {...boxStyle}>
-          <ArrowDownward
+          <ArrowDownwardRounded
             {...iconStyle}
             color={+down > 0 ? "primary" : "disabled"}
           />
@@ -184,7 +184,7 @@ export const LayoutTraffic = () => {
               isDebug && (await gc());
             }}
           >
-            <MemoryOutlined {...iconStyle} />
+            <MemoryRounded {...iconStyle} />
             <Typography {...valStyle}>{inuse}</Typography>
             <Typography {...unitStyle}>{inuseUnit}</Typography>
           </Box>

src/components/profile/editor-viewer.tsx

@@ -10,9 +10,11 @@ import {
   DialogTitle,
   IconButton,
 } from "@mui/material";
-import FormatPaintIcon from "@mui/icons-material/FormatPaint";
-import OpenInFullIcon from "@mui/icons-material/OpenInFull";
-import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
+import {
+  FormatPaintRounded,
+  OpenInFullRounded,
+  CloseFullscreenRounded,
+} from "@mui/icons-material";
 import { useThemeMode } from "@/services/states";
 import { Notice } from "@/components/base";
 import { nanoid } from "nanoid";
@@ -223,7 +225,7 @@ export const EditorViewer = <T extends Language>(props: Props<T>) => {
                 ?.run()
             }
           >
-            <FormatPaintIcon fontSize="inherit" />
+            <FormatPaintRounded fontSize="inherit" />
           </IconButton>
           <IconButton
             size="medium"
@@ -231,7 +233,7 @@ export const EditorViewer = <T extends Language>(props: Props<T>) => {
             title={t(isMaximized ? "Minimize" : "Maximize")}
             onClick={() => appWindow.toggleMaximize().then(editorResize)}
           >
-            {isMaximized ? <CloseFullscreenIcon /> : <OpenInFullIcon />}
+            {isMaximized ? <CloseFullscreenRounded /> : <OpenInFullRounded />}
           </IconButton>
         </ButtonGroup>
       </DialogContent>

src/components/profile/groups-editor-viewer.tsx

@@ -30,8 +30,10 @@ import {
   TextField,
   styled,
 } from "@mui/material";
-import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
-import VerticalAlignBottomIcon from "@mui/icons-material/VerticalAlignBottom";
+import {
+  VerticalAlignTopRounded,
+  VerticalAlignBottomRounded,
+} from "@mui/icons-material";
 import { GroupItem } from "@/components/profile/group-item";
 import {
   getNetworkInterfaces,
@@ -712,7 +714,7 @@ export const GroupsEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
-                  startIcon={<VerticalAlignTopIcon />}
+                  startIcon={<VerticalAlignTopRounded />}
                   onClick={() => {
                     try {
                       validateGroup();
@@ -734,7 +736,7 @@ export const GroupsEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
-                  startIcon={<VerticalAlignBottomIcon />}
+                  startIcon={<VerticalAlignBottomRounded />}
                   onClick={() => {
                     try {
                       validateGroup();

src/components/profile/profile-item.tsx

@@ -15,7 +15,7 @@ import {
   Menu,
   CircularProgress,
 } from "@mui/material";
-import { RefreshRounded, DragIndicator } from "@mui/icons-material";
+import { RefreshRounded, DragIndicatorRounded } from "@mui/icons-material";
 import { useLoadingCache, useSetLoadingCache } from "@/services/states";
 import {
   viewProfile,
@@ -348,7 +348,7 @@ export const ProfileItem = (props: Props) => {
               {...attributes}
               {...listeners}
             >
-              <DragIndicator
+              <DragIndicatorRounded
                 sx={[
                   { cursor: "move", marginLeft: "-6px" },
                   ({ palette: { text } }) => {

src/components/profile/proxies-editor-viewer.tsx

@@ -27,8 +27,10 @@ import {
   TextField,
   styled,
 } from "@mui/material";
-import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
-import VerticalAlignBottomIcon from "@mui/icons-material/VerticalAlignBottom";
+import {
+  VerticalAlignTopRounded,
+  VerticalAlignBottomRounded,
+} from "@mui/icons-material";
 import { ProxyItem } from "@/components/profile/proxy-item";
 import { readProfileFile, saveProfileFile } from "@/services/cmds";
 import { Notice } from "@/components/base";
@@ -271,7 +273,7 @@ export const ProxiesEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
-                  startIcon={<VerticalAlignTopIcon />}
+                  startIcon={<VerticalAlignTopRounded />}
                   onClick={() => {
                     let proxies = handleParse();
                     setPrependSeq([...prependSeq, ...proxies]);
@@ -284,7 +286,7 @@ export const ProxiesEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
-                  startIcon={<VerticalAlignBottomIcon />}
+                  startIcon={<VerticalAlignBottomRounded />}
                   onClick={() => {
                     let proxies = handleParse();
                     setAppendSeq([...appendSeq, ...proxies]);

src/components/profile/rules-editor-viewer.tsx

@@ -29,8 +29,10 @@ import {
   TextField,
   styled,
 } from "@mui/material";
-import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
-import VerticalAlignBottomIcon from "@mui/icons-material/VerticalAlignBottom";
+import {
+  VerticalAlignTopRounded,
+  VerticalAlignBottomRounded,
+} from "@mui/icons-material";
 import { readProfileFile, saveProfileFile } from "@/services/cmds";
 import { Notice, Switch } from "@/components/base";
 import getSystem from "@/utils/get-system";
@@ -536,7 +538,7 @@ export const RulesEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
-                  startIcon={<VerticalAlignTopIcon />}
+                  startIcon={<VerticalAlignTopRounded />}
                   onClick={() => {
                     try {
                       let raw = validateRule();
@@ -554,7 +556,7 @@ export const RulesEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
-                  startIcon={<VerticalAlignBottomIcon />}
+                  startIcon={<VerticalAlignBottomRounded />}
                   onClick={() => {
                     try {
                       let raw = validateRule();

src/components/setting/mods/clash-core-viewer.tsx

@@ -5,7 +5,10 @@ import { useTranslation } from "react-i18next";
 import { useVerge } from "@/hooks/use-verge";
 import { useLockFn } from "ahooks";
 import { LoadingButton } from "@mui/lab";
-import { SwitchAccessShortcut, RestartAlt } from "@mui/icons-material";
+import {
+  SwitchAccessShortcutRounded,
+  RestartAltRounded,
+} from "@mui/icons-material";
 import {
   Box,
   Button,
@@ -85,7 +88,7 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
             <LoadingButton
               variant="contained"
               size="small"
-              startIcon={<SwitchAccessShortcut />}
+              startIcon={<SwitchAccessShortcutRounded />}
               loadingPosition="start"
               loading={upgrading}
               sx={{ marginRight: "8px" }}
@@ -97,7 +100,7 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
               variant="contained"
               size="small"
               onClick={onRestart}
-              startIcon={<RestartAlt />}
+              startIcon={<RestartAltRounded />}
             >
               {t("Restart")}
             </Button>

src/components/setting/mods/sysproxy-viewer.tsx

@@ -14,7 +14,7 @@ import {
 import { useVerge } from "@/hooks/use-verge";
 import { getSystemProxy, getAutotemProxy } from "@/services/cmds";
 import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base";
-import { Edit } from "@mui/icons-material";
+import { EditRounded } from "@mui/icons-material";
 import { EditorViewer } from "@/components/profile/editor-viewer";
 import { BaseFieldset } from "@/components/base/base-fieldset";
 import getSystem from "@/utils/get-system";
@@ -253,7 +253,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
                 sx={{ padding: "3px 0" }}
               />
               <Button
-                startIcon={<Edit />}
+                startIcon={<EditRounded />}
                 variant="outlined"
                 onClick={() => {
                   setEditorOpen(true);

src/components/setting/mods/theme-viewer.tsx

@@ -14,7 +14,7 @@ import { useVerge } from "@/hooks/use-verge";
 import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
 import { BaseDialog, DialogRef, Notice } from "@/components/base";
 import { EditorViewer } from "@/components/profile/editor-viewer";
-import { Edit } from "@mui/icons-material";
+import { EditRounded } from "@mui/icons-material";
 
 export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -115,7 +115,7 @@ export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
         <Item>
           <ListItemText primary={t("CSS Injection")} />
           <Button
-            startIcon={<Edit />}
+            startIcon={<EditRounded />}
             variant="outlined"
             onClick={() => {
               setEditorOpen(true);

src/components/setting/setting-system.tsx

@@ -1,7 +1,7 @@
 import useSWR from "swr";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { PrivacyTipRounded, Settings } from "@mui/icons-material";
+import { PrivacyTipRounded, SettingsRounded } from "@mui/icons-material";
 import { checkService } from "@/services/cmds";
 import { useVerge } from "@/hooks/use-verge";
 import { DialogRef, Switch } from "@/components/base";
@@ -56,7 +56,7 @@ const SettingSystem = ({ onError }: Props) => {
         extra={
           <TooltipIcon
             title={t("Tun Mode Info")}
-            icon={Settings}
+            icon={SettingsRounded}
             onClick={() => tunRef.current?.open()}
           />
         }
@@ -106,7 +106,7 @@ const SettingSystem = ({ onError }: Props) => {
           <>
             <TooltipIcon
               title={t("System Proxy Info")}
-              icon={Settings}
+              icon={SettingsRounded}
               onClick={() => sysproxyRef.current?.open()}
             />
           </>

src/components/test/test-item.tsx

@@ -13,7 +13,7 @@ import {
   alpha,
 } from "@mui/material";
 import { BaseLoading } from "@/components/base";
-import { LanguageTwoTone } from "@mui/icons-material";
+import { LanguageRounded } from "@mui/icons-material";
 import { Notice } from "@/components/base";
 import { TestBox } from "./test-box";
 import delayManager from "@/services/delay";
@@ -146,7 +146,7 @@ export const TestItem = (props: Props) => {
             </Box>
           ) : (
             <Box sx={{ display: "flex", justifyContent: "center" }}>
-              <LanguageTwoTone sx={{ height: "40px" }} fontSize="large" />
+              <LanguageRounded sx={{ height: "40px" }} fontSize="large" />
             </Box>
           )}
 

src/pages/settings.tsx

@@ -2,7 +2,7 @@ import { Box, ButtonGroup, Grid, IconButton } from "@mui/material";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { BasePage, Notice } from "@/components/base";
-import { GitHub, HelpOutlineSharp, Telegram } from "@mui/icons-material";
+import { GitHub, HelpOutlineRounded, Telegram } from "@mui/icons-material";
 import { openWebUrl } from "@/services/cmds";
 import SettingVerge from "@/components/setting/setting-verge";
 import SettingClash from "@/components/setting/setting-clash";
@@ -42,7 +42,7 @@ const SettingPage = () => {
             title={t("Manual")}
             onClick={toGithubDoc}
           >
-            <HelpOutlineSharp fontSize="inherit" />
+            <HelpOutlineRounded fontSize="inherit" />
           </IconButton>
           <IconButton
             size="medium"