feat(ui): change icons to phosphor-icons #467 (#469)

* change icons to phosphor-icons

* feat(ui): change icons to phosphor-icons

* feat(ui): change icons to phosphor-icons

* feat(ui): correct icon sizes, weights, and colors

* feat(ui): change arrow-up-right sizes to 16px

src/views/components/common/FileUpload.tsx

@@ -1,17 +1,17 @@
+import type { Icon, IconProps } from '@phosphor-icons/react';
 import type { ThemeColor } from '@shared/types/ThemeColors';
 import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';
 
-import type IconComponent from '~icons/material-symbols';
-
 interface Props {
     className?: string;
     style?: React.CSSProperties;
     variant: 'filled' | 'outline' | 'single';
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    icon?: typeof IconComponent;
+    icon?: Icon;
+    iconProps?: IconProps;
     disabled?: boolean;
     title?: string;
     color: ThemeColor;
@@ -28,6 +28,7 @@ export default function FileUpload({
     variant,
     onChange,
     icon,
+    iconProps,
     disabled,
     title,
     color,
@@ -62,7 +63,7 @@ export default function FileUpload({
             )}
             title={title}
         >
-            {Icon && <Icon className='h-6 w-6' />}
+            {Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
             {!isIconOnly && (
                 <Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
                     {children}