fix: Use MaterialUI SvgIcons instead of Font

[Dschoordsch]

Description

Fixes #6062

Use Material UI SVG icons instead of the font

Demo

No demo, app should look the same.

Testing scenarios

Use the whole app, ideally running release testing procedure to check that all screens look as intended.

Final checklist

• [ ] I checked the code review guidelines
• [ ] I have added Metrics Representative as reviewer(s) if my PR invovles metrics/data/analytics related changes
• [ ] I have performed a self-review of my code, the same way I'd do it for any other team member
• [ ] I have tested all cases I listed in the testing scenarios and I haven't found any issues or regressions
• [ ] Whenever I took a non-obvious choice I added a comment explaining why I did it this way
• [ ] I added the label One Review Required if the PR introduces only minor changes, does not contain any architectural changes or does not introduce any new patterns and I think one review is sufficient'
• [ ] PR title is human readable and could be used in changelog

[github-actions[bot]]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR will be delayed and might be rejected due to its size.

[github-actions[bot]]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR will be delayed and might be rejected due to its size.

[github-actions[bot]]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR will be delayed and might be rejected due to its size.

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
18 Code Smells

No Coverage information
2.2% Duplication

[Dschoordsch]

The current implementation increases the bundle size. Since the images are components, these are also not cached, degrading the performance overall. Initial load increases from 5.0 to 5.2 MB.

[87prashant]

degrading the performance overall

That's sad, any way we can improve it?

[Dschoordsch]

degrading the performance overall

That's sad, any way we can improve it?

I think we have to go the SVG route, i.e. downloading the used icons as SVG and using those as images. This will probably not change the download size much, but it makes it possible to cache the images in the browser. As components these will need to be loaded each release. Not a huge deal, but when we touch this, we should do it right.

[Dschoordsch]

degrading the performance overall

That's sad, any way we can improve it?

I think we have to go the SVG route, i.e. downloading the used icons as SVG and using those as images. This will probably not change the download size much, but it makes it possible to cache the images in the browser. As components these will need to be loaded each release. Not a huge deal, but when we touch this, we should do it right.

I made a mistake when measuring as I did not properly minimize the chunks (I did not pass --deploy). When properly done, the size is virtually identical, so we can move on with this.

[github-actions[bot]]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR will be delayed and might be rejected due to its size.

[Dschoordsch]

@igorlesnenko I know you've taken a look at this before the rebase, but could you please just do a quick glance over if there is something obviously wrong?

[github-actions[bot]]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR will be delayed and might be rejected due to its size.