Skip to content

Support `@mdi/react` and tweak `<Icon />`

Administrator requested to merge tr/mdi-react-migrate into main

Created by: umpox

Description

This PR:

  • Adds support for @mdi/react and @mdi/js as an preferred alternative to mdi-react.
  • Splits <Icon /> into <IconStyles /> and <Icon />
    • <IconStyles />: Purely for alternative elements that needed the icon-inline class previously (e.g. <div className="icon-inline" /> is still quite common)
    • <Icon />: Purely for SVG icons, either added by ourselves, or through the mdi-react | @mdi/react packages.

@mdi/react vs mdi-react

Problem: mdi-react doesn't allow us to inject important elements that are required for accessibility (The

element to label an SVG). This means that screen readers report "Unlabelled image" many times across our app. This is possible with @mdi/react.

The new library also:

  • Supports all the same icons
  • Has similar/slightly more usage according to NPM
  • Is actively maintained by the person who also runs materialdesignicons (which both libraries source from)

Test plan

App preview:

Check out the client app preview documentation to learn more.

Merge request reports