`<Icon />`: Update component for more control over `<svg>` element

Created by: umpox

Description

We ran into some issues when migrating to use the @mdi/react <Icon /> component:

• Color was set on <path> elements
• It wasn't possible to set the height and width attributes. The component doesn't support passing through normal SVG props.

We don't need to use this component now we have the paths through @mdi/js, we can just roll our own that is similar to our setup with mdi-react, but can also add some of the benefits that we'd get from @mdi/react.

Note I haven't included the title and description logic. As we are using role="img" and aria-label|hidden, this isn't as important anymore. One of the issues I noticed is that title also gives a secondary tooltip on long hovers, which isn't intended (as opposed to our actual tooltip usage).

Test plan

Tested locally and in Storybook. Visual regression tests to confirm no UX changes.

App preview:

• Web
• Storybook

Check out the client app preview documentation to learn more.