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/LanguageSwitcher/LanguageSwitcherContainer/index.tsx

@@ -1,8 +1,9 @@
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronLeftIcon } from "@/components/Icons"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./languageSwitcherContainer.module.css"
@@ -34,7 +35,11 @@ export default function LanguageSwitcherContainer({
             className={styles.backButton}
             onClick={() => toggleDropdown(position)}
           >
-            <ChevronLeftIcon color="red" height={20} width={20} />
+            <MaterialIcon
+              icon="chevron_left"
+              color="Icon/Interactive/Accent"
+              size={20}
+            />
             <Subtitle type="one" asChild>
               <span>
                 {intl.formatMessage({

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -3,9 +3,10 @@
 import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { type Lang, languages } from "@/constants/languages"
 
-import { CheckIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
@@ -46,7 +47,12 @@ export default function LanguageSwitcherContent({
                   keepSearchParams
                 >
                   {languages[key]}
-                  {isActive ? <CheckIcon color="burgundy" /> : null}
+                  {isActive ? (
+                    <MaterialIcon
+                      icon="check"
+                      color="Icon/Interactive/Default"
+                    />
+                  ) : null}
                 </Link>
               </li>
             )

apps/scandic-web/components/LanguageSwitcher/index.tsx

@@ -5,11 +5,12 @@ import { useRef } from "react"
 import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { languages } from "@/constants/languages"
 import { trpc } from "@/lib/trpc/client"
 import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronDownSmallIcon, GlobeIcon } from "@/components/Icons"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
@@ -105,14 +106,14 @@ export default function LanguageSwitcher({ type }: LanguageSwitcherProps) {
         aria-label={isLanguageSwitcherOpen ? closeMsg : openMsg}
         onClick={handleClick}
       >
-        <GlobeIcon width={globeIconSize} height={globeIconSize} />
+        <MaterialIcon icon="globe" size={globeIconSize} />
         <Caption className={styles.buttonText} type="regular" asChild>
           <span>{languages[currentLanguage]}</span>
         </Caption>
-        <ChevronDownSmallIcon
+        <MaterialIcon
+          icon="keyboard_arrow_down"
           className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
-          width={20}
-          height={20}
+          size={20}
         />
       </button>