[UXUI] Evaluate alternative icon sets

[glenflorendo]

User Story

As a developer, I want to improve the performance and reduce unnecessary dependencies in our web application by evaluating and implementing the Heroicons icon library as a replacement for the bulky Material UI icon sets.

This change aligns with our goal of optimizing our codebase and enhancing the user experience.

Description

We are currently using the Material UI icon sets for our web application, which are bulky and require us to import the Material UI library, even though we do not use it extensively. This leads to unnecessary overhead and increased bundle size.

Heroicons, created by the makers of Tailwind CSS, offer a lightweight and customizable set of icons that align well with our existing use of Tailwind CSS. By switching to Heroicons, we can improve performance and streamline our codebase.

Acceptance Criteria

• (UIUX) Research and evaluate the suitability of Heroicons for our web application.
• (UIUX) Ensure that the new icon set integrates seamlessly with our existing design system and components.
• (UIUX) Update documentation and notify the development team of the change.
• (Dev) Replace all instances of Material UI icons with Heroicons where applicable.

Design References

• Heroicons