feat: add material symbols

[brian-smith-tcril]

• Update from @material-icons/svg to @material-design-icons/svg
• Add @material-symbols/svg-400

Description

Include a description of your changes here, along with a link to any relevant Jira tickets and/or Github issues.

Deploy Preview

https://deploy-preview-3045--paragon-openedx.netlify.app/foundations/icons/

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	6782c82
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/6667678e7e931c0008fe72e0
😎 Deploy Preview	https://deploy-preview-3045--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.20%. Comparing base (9993fb3) to head (6782c82).
Report is 3 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3045      +/-   ##
==========================================
+ Coverage   93.18%   93.20%   +0.02%     
==========================================
  Files         249      249              
  Lines        4342     4359      +17     
  Branches     1000     1036      +36     
==========================================
+ Hits         4046     4063      +17     
+ Misses        293      290       -3     
- Partials        3        6       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[brian-smith-tcril]

When running npm start locally I encountered this issue

⠹ Building development bundle

<--- Last few GCs --->

[647145:0x6026c50]   136650 ms: Scavenge 4065.4 (4115.4) -> 4062.7 (4116.1) MB, 4.5 / 0.0 ms  (average mu = 0.331, current mu = 0.337) allocation failure; 
[647145:0x6026c50]   136669 ms: Scavenge 4065.9 (4116.1) -> 4063.3 (4116.9) MB, 4.5 / 0.0 ms  (average mu = 0.331, current mu = 0.337) allocation failure; 
[647145:0x6026c50]   136688 ms: Scavenge 4066.5 (4117.1) -> 4063.8 (4117.1) MB, 4.6 / 0.0 ms  (average mu = 0.331, current mu = 0.337) allocation failure; 


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb9a330 node::Abort() [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
 2: 0xaa07ee  [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
 3: 0xd71ed0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
 4: 0xd72277 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
 5: 0xf4f635  [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
 6: 0xf50538 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
 7: 0xf60a33  [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
 8: 0xf618a8 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
 9: 0xf64a75 v8::internal::Heap::HandleGCRequest() [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
10: 0xee2bdf v8::internal::StackGuard::HandleInterrupts() [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
11: 0x12e3335 v8::internal::Runtime_StackGuard(int, unsigned long*, v8::internal::Isolate*) [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
12: 0x1710739  [/home/bsmith/.nvm/versions/node/v18.20.2/bin/node]
Aborted
npm ERR! Lifecycle script `develop` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: [email protected] 
npm ERR!   at location: /home/bsmith/code/paragon/www 
npm ERR! Lifecycle script `start` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: [email protected] 
npm ERR!   at location: /home/bsmith/code/paragon/www 

[brian-smith-tcril]

I was able to work around the issue by giving node more ram (8GB instead of the default 2) https://github.com/openedx/paragon/compare/1314c443e62567a57795776204faf79b47f547fb..6782c82efc14accece97f8747e4020c342f23e5b

I have not investigated any impact on bundle size for MFEs consuming Paragon with this change yet.

[bradenmacdonald]

While you're at this, I noticed that all our icon es5/*.js files all start with this line of Babel boilerplate that's not needed anymore, but significantly increases all our icon file sizes:

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

I found you can fix it with this change, which significantly reduces the total size of the es5 folder (though it's actual effect on MFE build size varies a lot depending on the MFE's own babel config; the effect on the gzipped size is ~none in any case).

[bradenmacdonald]

Also, as far as I can tell, frontend-build's current webpack configuration cannot correctly tree-shake unused paragon icons out of the final build. If possible, I'd like to make sure we fix that (I believe it's a frontend-build problem, not a paragon problem) before we add hundreds more icons.

[brian-smith-tcril]

I'd like to make sure we fix that (I believe it's a frontend-build problem, not a paragon problem) before we add hundreds more icons.

100% agree