Merged in feat/SW-1711-switch-icons (pull request #1558)

Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons.

Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra

apps/scandic-web/components/Maps/InteractiveMap/index.tsx

@@ -2,7 +2,8 @@
 import { Map, type MapProps, useMap } from "@vis.gl/react-google-maps"
 import { useIntl } from "react-intl"
 
-import { MinusIcon, PlusIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 
 import HotelListingMapContent from "./HotelListingMapContent"
@@ -71,7 +72,7 @@ export default function InteractiveMap({
             onClick={zoomOut}
             aria-label={intl.formatMessage({ id: "Zoom in" })}
           >
-            <MinusIcon color="burgundy" width={20} height={20} />
+            <MaterialIcon icon="remove" color="CurrentColor" size={20} />
           </Button>
           <Button
             theme="base"
@@ -82,7 +83,7 @@ export default function InteractiveMap({
             onClick={zoomIn}
             aria-label={intl.formatMessage({ id: "Zoom out" })}
           >
-            <PlusIcon color="burgundy" width={20} height={20} />
+            <MaterialIcon icon="add" color="CurrentColor" size={20} />
           </Button>
         </div>
       </div>

apps/scandic-web/components/Maps/Markers/Poi/index.tsx

@@ -1,4 +1,4 @@
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { IconByIconName } from "@/components/Icons/IconByIconName"
 
 import { getIconByPoiGroupAndCategory } from "../utils"
 import { poiVariants } from "./variants"
@@ -13,15 +13,14 @@ export default function PoiMarker({
   className = "",
 }: PoiMarkerProps) {
   const iconName = getIconByPoiGroupAndCategory(group, categoryName)
-  const Icon = iconName ? getIconByIconName(iconName) : null
   const classNames = poiVariants({ group, skipBackground, className })
 
-  return Icon ? (
+  return iconName ? (
     <span className={classNames}>
-      <Icon
-        color={skipBackground ? "grey80" : "white"}
-        width={size}
-        height={size}
+      <IconByIconName
+        iconName={iconName}
+        color={skipBackground ? "Icon/Feedback/Neutral" : "Icon/Inverted"}
+        size={size}
       />
     </span>
   ) : null

apps/scandic-web/components/Maps/Markers/utils.ts

@@ -1,4 +1,5 @@
-import { IconName } from "@/types/components/icon"
+import { IconName } from "@/components/Icons/iconName"
+
 import { PointOfInterestGroupEnum } from "@/types/enums/pointOfInterest"
 
 export function getIconByPoiGroupAndCategory(