Updates icons to use Remixicons where they don't already

frontends/.eslintrc.js

@@ -154,11 +154,6 @@ function restrictedImports({ paths = [], patterns = [] } = {}) {
             message: "Please use @faker-js/faker/locale/en instead.",
             allowTypeImports: true,
           },
-          {
-            name: "@mui/icons-material",
-            message: "Please use @mui/icons-material/<ICON_NAME> instead.",
-            allowTypeImports: true,
-          },
           {
             name: "@mui/material",
             message: "Please use @mui/material/<COMPONENT_NAME> instead.",

frontends/mit-open/package.json

@@ -60,7 +60,6 @@
   "dependencies": {
     "@ebay/nice-modal-react": "^1.2.13",
     "@mitodl/course-search-utils": "^3.1.4",
-    "@mui/icons-material": "^5.15.15",
     "@remixicon/react": "^4.2.0",
     "@sentry/react": "^7.57.0",
     "@tanstack/react-query": "^4.36.1",

frontends/mit-open/src/components/ChannelMenu/ChannelMenu.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from "react"
 import * as routes from "../../common/urls"
 import { SimpleMenu, ActionButton, styled } from "ol-components"
 import type { SimpleMenuItem } from "ol-components"
-import SettingsIcon from "@mui/icons-material/Settings"
+import { RiSettings4Fill } from "@remixicon/react"
 
 const InvertedButton = styled(ActionButton)({ color: "white" })
 
@@ -29,7 +29,7 @@ const ChannelMenu: React.FC<{ channelType: string; name: string }> = ({
       items={items}
       trigger={
         <InvertedButton variant="text">
-          <SettingsIcon />
+          <RiSettings4Fill />
         </InvertedButton>
       }
     />

frontends/mit-open/src/components/RootTopicIcon/RootTopicIcon.tsx

@@ -1,31 +1,31 @@
 import {
   RiPaletteLine,
-  RiSeedlingLine,
-  RiBriefcaseLine,
-  RiMacbookLine,
-  RiBarChartBoxLine,
+  RiShakeHandsLine,
   RiEarthLine,
-  RiLightbulbLine,
-  RiBuildingLine,
-  RiServiceLine,
   RiQuillPenLine,
-  RiMicroscopeLine,
+  RiBriefcase3Line,
+  RiLightbulbFlashLine,
+  RiRobot2Line,
+  RiStethoscopeLine,
+  RiInfinityLine,
+  RiTestTubeLine,
+  RiUserSearchLine,
 } from "@remixicon/react"
 import React from "react"
 
 /* TODO Using any icons until we have a solution for specifying them */
 const ICON_MAP = {
-  Business: RiBriefcaseLine,
-  Energy: RiLightbulbLine,
-  Engineering: RiBuildingLine,
+  Business: RiBriefcase3Line,
+  Energy: RiLightbulbFlashLine,
+  Engineering: RiRobot2Line,
   "Fine Arts": RiPaletteLine,
-  "Health and Medicine": RiServiceLine,
+  "Health and Medicine": RiStethoscopeLine,
   Humanities: RiQuillPenLine,
-  Mathematics: RiBarChartBoxLine,
-  Science: RiMicroscopeLine,
-  "Social Science": RiSeedlingLine,
+  Mathematics: RiInfinityLine,
+  Science: RiTestTubeLine,
+  "Social Science": RiUserSearchLine,
   Society: RiEarthLine,
-  "Teaching and Education": RiMacbookLine,
+  "Teaching and Education": RiShakeHandsLine,
 }
 
 type RootTopicIconProps = { name: string }

frontends/mit-open/src/page-components/CardTemplate/CardTemplate.tsx

@@ -7,7 +7,7 @@ import {
   styled,
   TruncateText,
 } from "ol-components"
-import DragIndicatorIcon from "@mui/icons-material/DragIndicator"
+import { RiDraggable } from "@remixicon/react"
 import {
   DEFAULT_RESOURCE_IMG,
   EmbedlyConfig,
@@ -238,7 +238,7 @@ const CardTemplate = ({
         </Details>
         {sortable ? (
           <DragHandle>
-            <DragIndicatorIcon fontSize="inherit" />
+            <RiDraggable fontSize="inherit" data-testid="CardDraggable" />
           </DragHandle>
         ) : null}
       </StyledCardContent>

frontends/mit-open/src/page-components/ChannelDetails/ChannelDetails.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from "react"
 import { styled, Typography, Box } from "ol-components"
 import { capitalize } from "ol-utilities"
 import { ChannelTypeEnum, Channel } from "api/v0"
-import OpenInNewIcon from "@mui/icons-material/OpenInNew"
+import { RiExternalLinkLine } from "@remixicon/react"
 
 type ChannelDetailsProps = {
   channel: Channel
@@ -90,7 +90,7 @@ const getFacetManifest = (channelType: ChannelTypeEnum) => {
       title: "More Information",
       labelFunction: (key: string, channelTitle: string) => (
         <a href={key}>
-          {channelTitle} website <OpenInNewIcon fontSize="inherit" />
+          {channelTitle} website <RiExternalLinkLine size={18} />
         </a>
       ),
       order: 1,

frontends/mit-open/src/page-components/Dialogs/AddToListDialog.tsx

@@ -11,10 +11,8 @@ import {
   styled,
 } from "ol-components"
 
-import LockOpenIcon from "@mui/icons-material/LockOpen"
-import LockIcon from "@mui/icons-material/Lock"
+import { RiLockLine, RiLockUnlockLine, RiAddLine } from "@remixicon/react"
 
-import AddIcon from "@mui/icons-material/Add"
 import * as NiceModal from "@ebay/nice-modal-react"
 
 import {
@@ -209,7 +207,7 @@ const PrivacyChip: React.FC<PrivacyChipProps> = ({
   selectedOption,
 }) => {
   const isPublic = selectedOption === publicOption
-  const icon = isPublic ? <LockOpenIcon /> : <LockIcon />
+  const icon = isPublic ? <RiLockUnlockLine /> : <RiLockLine />
   return <Chip icon={icon} label={selectedOption} size="medium" />
 }
 
@@ -253,7 +251,7 @@ const AddToListDialogInner: React.FC<AddToListDialogInnerProps> = ({
                 <ListItemButton
                   onClick={() => manageListDialogs.upsertLearningPath()}
                 >
-                  <AddIcon />
+                  <RiAddLine />
                   <ListItemText primary="Create a new list" />
                 </ListItemButton>
               </ListItem>
@@ -269,7 +267,7 @@ const AddToListDialogInner: React.FC<AddToListDialogInnerProps> = ({
                 <ListItemButton
                   onClick={() => manageListDialogs.upsertUserList()}
                 >
-                  <AddIcon />
+                  <RiAddLine />
                   <ListItemText primary="Create a new list" />
                 </ListItemButton>
               </ListItem>

frontends/mit-open/src/page-components/Header/Header.tsx

@@ -9,7 +9,21 @@ import {
   ClickAwayListener,
   ActionButtonLink,
 } from "ol-components"
-import { RiSearch2Line } from "@remixicon/react"
+import {
+  RiSearch2Line,
+  RiPencilRulerLine,
+  RiStackLine,
+  RiSignpostLine,
+  RiBookMarkedLine,
+  RiPresentationLine,
+  RiNodeTree,
+  RiVerifiedBadgeLine,
+  RiFileAddLine,
+  RiTimeLine,
+  RiHeartLine,
+  RiPriceTag3Line,
+  RiAwardLine,
+} from "@remixicon/react"
 import { MITLogoLink, useToggle } from "ol-utilities"
 import UserMenu from "./UserMenu"
 import { MenuButton } from "./MenuButton"
@@ -151,26 +165,26 @@ const navData: NavData = {
       items: [
         {
           title: "Courses",
-          icon: "/static/images/navdrawer/courses.svg",
+          icon: <RiPencilRulerLine />,
           description: "Learn with MIT instructors",
           href: querifiedSearchUrl({ resource_category: "course" }),
         },
         {
           title: "Programs",
-          icon: "/static/images/navdrawer/programs.svg",
+          icon: <RiStackLine />,
           description:
             "Learn in-depth from a series of courses and earn a certificate",
           href: querifiedSearchUrl({ resource_category: "program" }),
         },
         {
           title: "Pathways",
-          icon: "/static/images/navdrawer/pathways.svg",
+          icon: <RiSignpostLine />,
           description:
             "Achieve your learning goals with a curated collection of courses",
         },
         {
           title: "Learning Materials",
-          icon: "/static/images/navdrawer/learning_materials.svg",
+          icon: <RiBookMarkedLine />,
           description:
             "Free teaching and learning materials including videos, podcasts, lecture notes, etc.",
           href: querifiedSearchUrl({ resource_category: "learning_material" }),
@@ -182,17 +196,17 @@ const navData: NavData = {
       items: [
         {
           title: "By Topic",
-          icon: "/static/images/navdrawer/topics.svg",
+          icon: <RiPresentationLine />,
           href: TOPICS,
         },
         {
           title: "By Departments",
-          icon: "/static/images/navdrawer/departments.svg",
+          icon: <RiNodeTree />,
           href: DEPARTMENTS,
         },
         {
           title: "By Provider",
-          icon: "/static/images/navdrawer/provider.svg",
+          icon: <RiVerifiedBadgeLine />,
           href: UNITS,
         },
       ],
@@ -202,27 +216,27 @@ const navData: NavData = {
       items: [
         {
           title: "New",
-          icon: "/static/images/navdrawer/new.svg",
+          icon: <RiFileAddLine />,
           href: querifiedSearchUrl({ sortby: "new" }),
         },
         {
           title: "Upcoming",
-          icon: "/static/images/navdrawer/free.svg",
+          icon: <RiTimeLine />,
           href: querifiedSearchUrl({ sortby: "upcoming" }),
         },
         {
           title: "Popular",
-          icon: "/static/images/navdrawer/popular.svg",
           href: querifiedSearchUrl({ sortby: "-views" }),
+          icon: <RiHeartLine />,
         },
         {
           title: "Free",
-          icon: "/static/images/navdrawer/free.svg",
+          icon: <RiPriceTag3Line />,
           href: querifiedSearchUrl({ free: "true" }),
         },
         {
           title: "With Certificate",
-          icon: "/static/images/navdrawer/certificate.svg",
+          icon: <RiAwardLine />,
           href: querifiedSearchUrl({ certification: "true" }),
         },
       ],