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/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx

@@ -2,11 +2,11 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { partnerSas } from "@/constants/routes/myPages"
 
-import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
 import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
@@ -18,7 +18,7 @@ export function AlreadyLinkedError() {
 
   return (
     <SASModal>
-      <ErrorCircleFilledIcon height={64} width={64} color="red" />
+      <MaterialIcon icon="cancel" isFilled size={64} />
       <Typography variant="Title/Subtitle/lg">
         <h1>{intl.formatMessage({ id: "Accounts are already linked" })}</h1>
       </Typography>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx

@@ -2,11 +2,11 @@
 import { Link } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { profile } from "@/constants/routes/myPages"
 
-import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
 import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
@@ -18,7 +18,12 @@ export function DateOfBirthError() {
 
   return (
     <SASModal>
-      <ErrorCircleFilledIcon height={64} width={64} color="red" />
+      <MaterialIcon
+        icon="cancel"
+        color="Icon/Feedback/Error"
+        isFilled
+        size={64}
+      />
       <Typography variant="Title/Subtitle/lg">
         <h1>{intl.formatMessage({ id: "Date of birth not matching" })}</h1>
       </Typography>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/GenericError.tsx

@@ -1,10 +1,9 @@
 "use client"
 import Image from "next/image"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
-
 import { SASModal } from "./SASModal"
 
 import type { ReactNode } from "react"
@@ -21,7 +20,12 @@ export function GenericError({
   return (
     <SASModal>
       {variant === "error" ? (
-        <ErrorCircleFilledIcon height={64} width={64} color="red" />
+        <MaterialIcon
+          icon="cancel"
+          isFilled
+          size={64}
+          color="Icon/Feedback/Error"
+        />
       ) : (
         <Image
           src="/_static/img/scandic-loyalty-time.svg"