chore: replace font-awesome with paragon icons (#1017)

* chore: replace font-awesome with paragon icons

package.json

@@ -33,11 +33,6 @@
     "@edx/frontend-enterprise-utils": "3.2.0",
     "@edx/frontend-platform": "4.0.1",
     "@edx/paragon": "20.39.2",
-    "@fortawesome/fontawesome-svg-core": "1.2.35",
-    "@fortawesome/free-brands-svg-icons": "5.15.3",
-    "@fortawesome/free-regular-svg-icons": "5.15.3",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
-    "@fortawesome/react-fontawesome": "0.1.14",
     "algoliasearch": "4.8.3",
     "axios-mock-adapter": "1.19.0",
     "classnames": "2.2.6",

src/components/Admin/AdminCards.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Award, Check, Groups, RemoveRedEye,
+} from '@edx/paragon/icons';
 
 import NumberCard from '../NumberCard';
 
@@ -17,7 +20,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.registeredLearners',
           defaultMessage: 'total number of learners registered',
         }),
-        iconClassName: 'fa fa-users',
+        icon: Groups,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.registeredUnenrolledLearners',
@@ -32,7 +35,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.enrolledOneCourse',
           defaultMessage: 'learners enrolled in at least one course',
         }),
-        iconClassName: 'fa fa-check',
+        icon: Check,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.enrolledLearners',
@@ -53,7 +56,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.activeLearnersPastWeek',
           defaultMessage: 'active learners in the past week',
         }),
-        iconClassName: 'fa fa-eye',
+        icon: RemoveRedEye,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.learnersActiveWeek',
@@ -77,7 +80,7 @@ class AdminCards extends React.Component {
       courseCompletions: {
         ref: React.createRef(),
         description: 'course completions',
-        iconClassName: 'fa fa-trophy',
+        icon: Award,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.completedLearners',
@@ -107,7 +110,7 @@ class AdminCards extends React.Component {
           id={cardKey}
           title={title}
           description={card.description}
-          iconClassName={card.iconClassName}
+          icon={card.icon}
           detailActions={card.actions}
         />
       </div>

src/components/Admin/AdminSearchForm.jsx

@@ -2,9 +2,9 @@
 import React from 'react';
 import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
 import { Form } from '@edx/paragon';
+import { Info } from '@edx/paragon/icons';
 
 import SearchBar from '../SearchBar';
 import { updateUrl } from '../../utils';
@@ -80,7 +80,7 @@ class AdminSearchForm extends React.Component {
                 <Form.Label className="search-label mb-2">
                   Filter by start date
                   <IconWithTooltip
-                    icon={faInfoCircle}
+                    icon={Info}
                     altText="More information"
                     tooltipText="A start date can be selected after the course name is selected."
                   />