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/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx

@@ -1,6 +1,10 @@
+import {
+  MaterialIcon,
+  type MaterialIconSetIconProps,
+} from "@scandic-hotels/design-system/Icons"
+
 import { serverClient } from "@/lib/trpc/server"
 
-import { EmailIcon, PhoneIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -27,9 +31,13 @@ export default async function ContactRow({ contact }: ContactRowProps) {
 
   let Icon = null
   if (contact.contact_field.includes("email")) {
-    Icon = EmailIcon
+    Icon = function (props: MaterialIconSetIconProps) {
+      return <MaterialIcon icon="mail" {...props} />
+    }
   } else if (contact.contact_field.includes("phone")) {
-    Icon = PhoneIcon
+    Icon = function (props: MaterialIconSetIconProps) {
+      return <MaterialIcon icon="phone" {...props} />
+    }
   }
 
   let openableLink = val
@@ -51,7 +59,7 @@ export default async function ContactRow({ contact }: ContactRowProps) {
         color="burgundy"
         size="small"
       >
-        {Icon ? <Icon width="20" height="20" color="burgundy" /> : null}
+        {Icon ? <Icon size={20} color="Icon/Interactive/Default" /> : null}
         {val}
       </Link>
       {footnote && <Footnote color="burgundy">{footnote}</Footnote>}

apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/index.tsx

@@ -1,6 +1,7 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { faq, membershipTermsAndConditions } from "@/constants/currentWebHrefs"
 
-import ArrowRight from "@/components/Icons/ArrowRight"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
@@ -34,11 +35,11 @@ export default async function ReadMore() {
             color="burgundy"
             href={link.href}
           >
-            <ArrowRight
-              color="burgundy"
+            <MaterialIcon
+              icon="arrow_forward"
+              color="CurrentColor"
               className={styles.icon}
-              height="20"
-              width="20"
+              size={20}
             />
             {link.text}
           </Link>

apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx

@@ -1,5 +1,6 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { auth } from "@/auth"
-import ArrowRight from "@/components/Icons/ArrowRight"
 import { ScandicFriends } from "@/components/Levels"
 import LoginButton from "@/components/LoginButton"
 import Button from "@/components/TempDesignSystem/Button"
@@ -60,11 +61,11 @@ export default async function JoinLoyaltyContact({
             position="join scandic friends sidebar"
             color="burgundy"
           >
-            <ArrowRight
-              color="burgundy"
+            <MaterialIcon
+              icon="arrow_forward"
+              color="CurrentColor"
               className={styles.icon}
-              height="20"
-              width="20"
+              size={20}
             />
             {intl.formatMessage({ id: "Log in here" })}
           </LoginButton>