feat: adds material-symbols icon for consistency

The icons used in the Figma designs are from material symbols.
So, a npm package that provides them as SVGs is added a
dependency to the MFE and the correct book icon and the
in-progress icons are used.

package.json

@@ -15,6 +15,7 @@
     "@edx/frontend-enterprise-utils": "3.4.0",
     "@edx/frontend-platform": "4.6.3",
     "@edx/paragon": "^21.5.6",
+    "@material-symbols/svg-400": "^0.17.3",
     "@tanstack/react-query": "4.28.0",
     "@tanstack/react-query-devtools": "4.29.0",
     "algoliasearch": "4.6.0",

src/components/course/course-header/CourseHeader.jsx

@@ -10,7 +10,8 @@ import {
 } from '@edx/paragon';
 import { Link } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
-import { AccessTimeFilled, School } from '@edx/paragon/icons';
+import { AccessTimeFilled } from '@edx/paragon/icons';
+import { ReactComponent as Book2 } from '@material-symbols/svg-400/outlined/book_2-fill.svg';
 
 import { CourseContext } from '../CourseContextProvider';
 import CourseSkills from '../CourseSkills';
@@ -25,7 +26,7 @@ import {
 import { useCoursePartners, useIsCourseAssigned } from '../data/hooks';
 import LicenseRequestedAlert from '../LicenseRequestedAlert';
 import SubsidyRequestButton from '../SubsidyRequestButton';
-import CourseReview from '../CourseReview';
+// import CourseReview from '../CourseReview';
 
 import CoursePreview from './CoursePreview';
 import { UserSubsidyContext } from '../../enterprise-user-subsidy';
@@ -98,8 +99,8 @@ const CourseHeader = () => {
           </Col>
           <Col xs={12} md={7} className="d-flex flex-column justify-content-center">
             <div className="mb-4">
-              <FullChip icon={School} accent="mortar" text="COURSE" />
-              { isEnrolled && (<FullChip icon={School} accent="green" text="Enrolled" />) }
+              <FullChip icon={Book2} accent="mortar" text="COURSE" />
+              { isEnrolled && (<FullChip accent="indigo" text="Enrolled" />) }
             </div>
             <div className={classNames({ 'mb-4': !course.shortDescription, 'd-flex': true, 'align-items-center': true })}>
               <h2>{course.title}</h2>
@@ -112,9 +113,11 @@ const CourseHeader = () => {
                 dangerouslySetInnerHTML={{ __html: course.shortDescription }}
               />
             )}
-            <p className="mb-4">
-              <strong><Icon src={AccessTimeFilled} class="d-inline" /> Access Until: </strong> {accessUntil}
-            </p>
+            <div className="mb-4 d-flex">
+              <Icon src={AccessTimeFilled} />
+              <span className="mx-2"><strong>Access Until:</strong></span>
+              {accessUntil}
+            </div>
             {course.skills?.length > 0 && <CourseSkills />}
             {isPolicyRedemptionEnabled && <CourseRunCards />}
             {catalog.containsContentItems && (

src/components/dashboard/main-content/course-enrollments/course-cards/NewCourseCard.jsx

@@ -3,14 +3,13 @@ import {
 } from '@edx/paragon';
 import {
   AccessTime,
-  Book,
-  CheckCircle,
   Info,
   List,
   RadioButtonUnchecked,
-  PieChart,
 } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
+import { ReactComponent as Book2 } from '@material-symbols/svg-400/outlined/book_2-fill.svg';
+import { ReactComponent as IncompleteCircle } from '@material-symbols/svg-400/outlined/incomplete_circle-fill.svg';
 
 import dayjs from '../../../../../utils/dayjs';
 import IconChip from '../../../../search/IconChip';
@@ -23,7 +22,7 @@ const SPACER = '\u00A0';
 const PROGRESS_PROPS_BY_STATUS = {
   [COURSE_STATUSES.inProgress]: {
     accent: 'dark-turquoise',
-    icon: PieChart,
+    icon: IncompleteCircle,
   },
   [COURSE_STATUSES.upcoming]: {
     accent: 'slate',
@@ -55,7 +54,7 @@ const NewCourseCard = ({
 }) => {
   const accent = 'mortar';
   const cardType = 'COURSE';
-  const cardTypeIcon = Book;
+  const cardTypeIcon = Book2;
 
   // NOTE: The Figma design involves showing the course duration in the subtitle.
   // Since the courses are open for multiple years in some cases, this shows strange

src/components/search/IconChip.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const IconChip = ({ accent, icon, text }) => (
   <div className={`x-small align-items-center d-flex font-weight-bold text-${accent}`}>
-    <Badge variant="secondary" className="p-1 mr-1">
+    <Badge variant={accent} className="p-1 mr-1">
       <Icon src={icon} className="tiny-icon" />
     </Badge>
     <span>{text}</span>

src/components/search/SearchCourseCard.jsx

@@ -10,7 +10,8 @@ import {
   Button, Card, Icon, Stack, Truncate,
 } from '@edx/paragon';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
-import { AccessTimeFilled, Book, Calendar } from '@edx/paragon/icons';
+import { AccessTimeFilled, Calendar } from '@edx/paragon/icons';
+import { ReactComponent as Book2 } from '@material-symbols/svg-400/outlined/book_2-fill.svg';
 
 import FullChip from './FullChip';
 import { getPrimaryPartnerLogo, isDefinedAndNotNull } from '../../utils/common';
@@ -131,7 +132,7 @@ const SearchCourseCard = ({
       <Card.Header
         title={(
           <>
-            <FullChip accent="mortar" icon={Book} text="Course" className="mb-3" />
+            <FullChip accent="mortar" icon={Book2} text="Course" className="mb-3" />
             {enrolled && (<FullChip accent="indigo" text="ENROLLED" />)}
             <Truncate maxLine={1}>{course.title}</Truncate>
           </>

src/theme.scss

@@ -21,6 +21,7 @@ $chip-border-radius: 6px;
 .tiny-icon {
   width: 14px !important;
   height: 14px !important;
+  fill: currentColor;
 }
 
 .pgn__chip {