Determine feasibility of switching from Font Awesome to Material UI icons

[Parisajf]

Overview

We want to find a larger collections of relevant free icons to use in the app than offered by the current collection of Free Font Awesome icons. One option is the Material UI icons, but that involves importing some large NPM modules as well, which might cause excessive bloat in the code base. Determine if using the Material UI icons actually causes an unacceptable increase in the size of the JavaScript downloaded to the browser.

Action Items

We need to research to see if the Material Icon libraries are useable with the app .(Tree shaking) If feasible, we will have the designers change out all the icons currently in the application designs with Material UI icons, and pass the changes to dev. Issue #1681

Resources/Instructions

Style Guide
Material Icons

[entrotech]

The bottom line is that Material UI icons do not bloat the bundle size significantly (using the webpack bundle analyzer (https://blog.jakoblind.no/webpack-bundle-analyzer/):

Without Material UI icons:

Static bundle size: 5.32 MB Parsed Bundle Size: 1.69 MB Gzipped size: 482 kB

With Material UI Icons (using instructions from here: https://mui.com/material-ui/material-icons/)

Static bundle size: 5.47 MB Parsed Bundle Size: 1.75 MB Gzipped size: 500 kB

With Material Design Icons imported via react-icons NPM package (https://react-icons.github.io/react-icons/icons/md/, the bundle size is identical to "Without Material UI Icons" above. This appears to be the same icon set as the Material UI icons mentioned above. This method also allows mix-and-matching any of the icons from the set listed here: https://react-icons.github.io/react-icons/

I would recommend

• installing the react-icons pacakge
• migrating the existing FontAwesome icons to use the react-icons package, rather than the current imports
• getting UI design to choose one of the libraries available to react-icons and map existing icons in the app to their replacement in the new icon set.
• migrating each existing icon to its replacement.