From d6fb50c7f4cef6c57209ace41e5dc7fccb8f0724 Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gustav.hansen@strapi.io>
Date: Tue, 20 Dec 2022 16:52:21 +0100
Subject: [PATCH] Onboarding: Use Icon component to render question or close
 icon

---
 .../admin/src/pages/Admin/Onboarding/index.js | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/Admin/Onboarding/index.js b/packages/core/admin/admin/src/pages/Admin/Onboarding/index.js
index 44400c0cce..c50bcacc99 100644
--- a/packages/core/admin/admin/src/pages/Admin/Onboarding/index.js
+++ b/packages/core/admin/admin/src/pages/Admin/Onboarding/index.js
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Box, FocusTrap, Typography } from '@strapi/design-system';
+import { Box, FocusTrap, Typography, Icon } from '@strapi/design-system';
 import { Book, Cross, Information, Question } from '@strapi/icons';
+import { pxToRem } from '@strapi/helper-plugin';
 
 import { useConfigurations } from '../../../hooks';
 
@@ -94,13 +95,20 @@ const Onboarding = () => {
     <OnboardingWrapper as="aside">
       <Button
         id="onboarding"
-        aria-label={formatMessage({
-          id: 'app.components.Onboarding.help.button',
-          defaultMessage: 'Help button',
-        })}
+        aria-label={formatMessage(
+          isOpen
+            ? {
+                id: 'app.components.Onboarding.help.button-close',
+                defaultMessage: 'Close help menu',
+              }
+            : {
+                id: 'app.components.Onboarding.help.button',
+                defaultMessage: 'Open help menu',
+              }
+        )}
         onClick={handleClick}
       >
-        {isOpen ? <Cross /> : <Question />}
+        <Icon as={isOpen ? Cross : Question} height={pxToRem(16)} width={pxToRem(16)} />
       </Button>
 
       {/* FIX ME - replace with popover when overflow popover is fixed