Use the mui built in icons

The ad-hoc variation did not fit in with the rest of the icons (e.g it had a different stroke width, and general vibe)

web/apps/photos/src/components/Collections/CollectionHeader.tsx

@@ -37,7 +37,8 @@ import LinkIcon from "@mui/icons-material/Link";
 import LogoutIcon from "@mui/icons-material/Logout";
 import MoreHoriz from "@mui/icons-material/MoreHoriz";
 import PeopleIcon from "@mui/icons-material/People";
-import PushPinOutlined from "@mui/icons-material/PushPinOutlined";
+import PushPinIcon from "@mui/icons-material/PushPin";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
 import SortIcon from "@mui/icons-material/Sort";
 import TvIcon from "@mui/icons-material/Tv";
 import Unarchive from "@mui/icons-material/Unarchive";
@@ -45,7 +46,6 @@ import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined";
 import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
 import { Box, IconButton, Stack, Tooltip } from "@mui/material";
 import { SetCollectionNamerAttributes } from "components/Collections/CollectionNamer";
-import { UnPinIcon } from "components/icons/UnPinIcon";
 import { t } from "i18next";
 import { GalleryContext } from "pages/gallery";
 import React, { useCallback, useContext, useRef } from "react";
@@ -654,14 +654,14 @@ const AlbumCollectionOptions: React.FC<AlbumCollectionOptionsProps> = ({
         {isPinned ? (
             <OverflowMenuOption
                 onClick={onUnpinClick}
-                startIcon={<UnPinIcon />}
+                startIcon={<PushPinOutlinedIcon />}
             >
                 {t("unpin_album")}
             </OverflowMenuOption>
         ) : (
             <OverflowMenuOption
                 onClick={onPinClick}
-                startIcon={<PushPinOutlined />}
+                startIcon={<PushPinIcon />}
             >
                 {t("pin_album")}
             </OverflowMenuOption>

web/apps/photos/src/components/icons/UnPinIcon.tsx

@@ -1,80 +0,0 @@
-import SvgIcon from "@mui/material/SvgIcon";
-
-export const UnPinIcon = (props) => {
-    return (
-        <SvgIcon
-            id="eNi9tomYy271"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 -960 960 960"
-            shape-rendering="geometricPrecision"
-            text-rendering="geometricPrecision"
-            {...props}
-        >
-            <defs>
-                <linearGradient
-                    id="eNi9tomYy273-fill"
-                    x1="0"
-                    y1="0.5"
-                    x2="1"
-                    y2="0.5"
-                    spreadMethod="pad"
-                    gradientUnits="objectBoundingBox"
-                    gradientTransform="translate(0 0)"
-                >
-                    <stop
-                        id="eNi9tomYy273-fill-0"
-                        offset="100%"
-                        stop-color="#fff"
-                    />
-                    <stop
-                        id="eNi9tomYy273-fill-1"
-                        offset="100%"
-                        stop-color="#fff"
-                    />
-                </linearGradient>
-            </defs>
-            <path d="M634,-448l86,77v60h-210v241l-30,30-30-30v-241h-210v-60l80-77v-332h-50v-60h414v60h-50v332Zm-313,77h312l-59-55v-354h-194v354l-59,55Zm156,0" />
-            <rect
-                width="26.347306"
-                height="26.347306"
-                rx="0"
-                ry="0"
-                transform="matrix(29.14543 20.40785-1.147153 1.638304 147.37857-852.859017)"
-                fill="url(#eNi9tomYy273-fill)"
-                stroke-width="0"
-            />
-            <rect
-                width="65.868264"
-                height="8.383234"
-                rx="0"
-                ry="0"
-                transform="matrix(.961684 0.648664-.559193 0.829038 575.09991-562.860814)"
-                fill="#f8eeee"
-                stroke-width="0"
-            />
-            <rect
-                width="65.868264"
-                height="8.383234"
-                rx="0"
-                ry="0"
-                transform="matrix(.961684 0.648664-.559193 0.829038 322.549012-741.890754)"
-                fill="#fff"
-                stroke-width="0"
-            />
-            <rect
-                width="96"
-                height="96"
-                rx="0"
-                ry="0"
-                transform="translate(1379.418154-389.125449)"
-                fill="#d2dbed"
-                stroke-width="0"
-            />
-        </SvgIcon>
-    );
-};
-
-UnPinIcon.defaultProps = {
-    height: 20,
-    width: 20,
-};