Updates icons to use Remixicons where they don't already

[jkachel]

What are the relevant tickets?

Closes mitodl/hq#4589
Closes mitodl/hq#4104

Description (What does it do?)

Swaps out icons with Remixicons where noted in this spreadsheet.

In addition, this updates the TopicsIcon component to take either a string or a React element - the string functionality was left in there in case we need it for something that needs an icon that's not a Remixicon, so not opposed to just making it take a React element.

Screenshots (if appropriate):

Topics icons:

Departments icons:

Side nav drawer:

Profile page:

Course card icons (some of them - I'm not real sure how to force it to display the Number of Courses one):

Lock chips:

How can this be tested?

View the site. Compare and contrast the icons used against the designs in Figma and the icons doc.

I removed a bunch of now-unused SVG icons as well so those shouldn't be in the build either.

Notes

There was a least one place where the icons we were using were 22x22px (in the sidebar nav) - I did not adjust the new icons to be 22x22 and left them at the default 24x24px because 24 is cleanly divisible by 8.

[shanbady]

It seems like we still have a bunch of references to mui icons like SettingsIcon in channelmenu.tsx Dragmenu in CardTemplate.tsx, BookmarkBorderIcon in LearningResourceCard. Are we leaving those in place for some reason?

[jkachel]

I updated the icons in the LearningResourceCard. I couldn't find the other two in Figma and they're not in the Google doc (linked here) so I wasn't sure what to change those to - @steven-hatch or @mbilalmughal may have some input here?

Edit: I changed SettingsIcon to RiSettingsLine and DragIndicatorIcon to RiDraggable - these seemed reasonable but they may need to change. (Though there wasn't a dotty draggable icon other than RiDraggable.)

[ChristopherChudzicki]

Searching for @mui/icons-material, there seem to many remaining material icons: 34 matches in .tsx, .ts files, 13 in storybook files and 21 elsewhere.

• 13 in storybook files ... These should be easy to replace. They don't really matter. They are just there to use an icon. What icon is irrelevant.
• 21 elsewhere

The "21 elsewhere" are in files

mit-open/src/page-components/
    /ChannelDetails/ChannelDetails.tsx
    /Dialogs/AddToListDialog.tsx
    /LearningResourceCardTemplate/LearningResourceCardTemplate.tsx
    /SearchDisplay/SearchInput.tsx
    /SearchSubscriptionToggle/SearchSubscriptionToggle.tsx

mit-open/src/pages/
    /HomePage/SearchInput.tsx
    /LearningPathListingPage/LearningPathListingPage.tsx
    /ListDetailsPage/ListDetailsPage.tsx
    /UserListListingPage/UserListListingPage.tsx


ol-widgets/src/components/
    /Widget.tsx
    /editing/WidgetsListEditable.tsx

Having looked at them a bit, the replacements I would make are:

MUI                     remixicon
OpenInNew               external-link-line
Add                     add-line
CalendarTodayIcon       calendar-line               note: not user facing right now
ClearIcon               close-line
ExpandMoreSharp         arrow-down-s-line
MailOutline             mail-line
Edit                    edit-line
MoreVert                more-2-line
Delete                  delete-bin-line
SwapVert                arrow-up-down-line
ExpandMore              arrow-down-s-line
ExpandLess              arrow-up-s-line
DragHandle              draggable** (not user facing)

The mui icon DragHandle doesn't have a great replacement in remixicon. But it's (a) only in a staff interface, and (b) that staff interface isn't even used right now (widget sorting). So I don't think we should worry about the replacement being sub optimal.

[shanbady]

@ChristopherChudzicki I think this can be looked at again. I should have all the material icons replaced

[ChristopherChudzicki]

The app looks good. I'm still seeing a few references to @mui/icons-material... could you remove these?

I don't think this needs a re-review, but I would recommend doing some sort of "Find all" for @mui/icons-material to double check before merging.

dismissing self review