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

packages/design-system/lib/components/RateCard/Campaign/index.tsx

@@ -3,8 +3,8 @@ import { Rate } from '../types'
 
 import styles from '../rate-card.module.css'
 import { Button } from '../../Button'
-import InfoCircleIcon from '../../Icons/InfoCircle'
 import { variants } from '../variants'
+import { MaterialIcon } from '../../Icons'
 
 interface CampaignRateCardProps {
   name: string
@@ -67,7 +67,7 @@ export default function CampaignRateCard({
                   size="Small"
                   onPress={handleTermsClick}
                 >
-                  <InfoCircleIcon height={20} width={20} />
+                  <MaterialIcon icon="info" size={20} color="CurrentColor" />
                 </Button>
                 {rateTitle}
                 <span className={styles.textSecondary}>

packages/design-system/lib/components/RateCard/Code/index.tsx

@@ -3,8 +3,8 @@ import { Rate } from '../types'
 import styles from '../rate-card.module.css'
 import { Typography } from '../../Typography'
 import { Button } from '../../Button'
-import InfoCircleIcon from '../../Icons/InfoCircle'
 import { variants } from '../variants'
+import { MaterialIcon } from '../../Icons'
 
 interface CodeRateCardProps {
   name: string
@@ -63,7 +63,7 @@ export default function CodeRateCard({
                   size="Small"
                   onPress={handleTermsClick}
                 >
-                  <InfoCircleIcon height={20} width={20} />
+                  <MaterialIcon icon="info" size={20} color="CurrentColor" />
                 </Button>
                 {rateTitle}
                 <span className={styles.textSecondary}>

packages/design-system/lib/components/RateCard/NoRateAvailable/index.tsx

@@ -1,8 +1,8 @@
 import styles from '../rate-card.module.css'
 import { Typography } from '../../Typography'
 import { Button } from '../../Button'
-import InfoCircleIcon from '../../Icons/InfoCircle'
 import { variants } from '../variants'
+import { MaterialIcon } from '../../Icons'
 
 interface NoRateAvailableCardProps {
   variant: 'Regular' | 'Campaign' | 'Code' | 'Points'
@@ -42,7 +42,7 @@ export default function NoRateAvailableCard({
                 size="Small"
                 onPress={handleTermsClick}
               >
-                <InfoCircleIcon height={20} width={20} />
+                <MaterialIcon icon="info" size={20} color="CurrentColor" />
               </Button>
               {`${rateTitle} / ${paymentTerm}`}
             </h3>

packages/design-system/lib/components/RateCard/Points/index.tsx

@@ -3,11 +3,10 @@ import { RatePointsOption } from '../types'
 
 import styles from '../rate-card.module.css'
 import { Button } from '../../Button'
-import InfoCircleIcon from '../../Icons/InfoCircle'
-import InfoCircleFilledIcon from '../../Icons/InfoCircleFilled'
 import { Radio } from '../../Radio'
 import { RadioGroup } from 'react-aria-components'
 import { variants } from '../variants'
+import { MaterialIcon } from '../../Icons'
 
 interface PointsRateCardProps {
   rateTitle: string
@@ -51,7 +50,7 @@ export default function PointsRateCard({
                 size="Small"
                 onPress={handleTermsClick}
               >
-                <InfoCircleIcon height={20} width={20} />
+                <MaterialIcon icon="info" size={20} color="CurrentColor" />
               </Button>
               {rateTitle}
               <span className={styles.textSecondary}>
@@ -100,7 +99,7 @@ export default function PointsRateCard({
             <Typography variant="Body/Supporting text (caption)/smBold">
               <p className={styles.notEnoughPoints}>
                 <div className={styles.filledIcon}>
-                  <InfoCircleFilledIcon height={20} width={20} />
+                  <MaterialIcon icon="info" isFilled size={20} />
                 </div>
                 {notEnoughPointsText}
               </p>

packages/design-system/lib/components/RateCard/Regular/index.tsx

@@ -3,9 +3,8 @@ import { Rate } from '../types'
 import styles from '../rate-card.module.css'
 import { Typography } from '../../Typography'
 import { Button } from '../../Button'
-import InfoCircleIcon from '../../Icons/InfoCircle'
-import CheckCircleIcon from '../../Icons/CheckCircle'
 import { variants } from '../variants'
+import { MaterialIcon } from '../../Icons'
 
 interface RegularRateCardProps {
   name: string
@@ -58,7 +57,7 @@ export default function RegularRateCard({
                   size="Small"
                   onPress={handleTermsClick}
                 >
-                  <InfoCircleIcon height={20} width={20} />
+                  <MaterialIcon icon="info" color="CurrentColor" />
                 </Button>
                 {rateTitle}
                 <span className={styles.textSecondary}>
@@ -67,7 +66,7 @@ export default function RegularRateCard({
               </h3>
             </Typography>
             <div className={styles.checkIcon}>
-              <CheckCircleIcon width={24} height={24} />
+              <MaterialIcon icon="check" color="CurrentColor" />
             </div>
           </header>
           <div>