Dynamic mdi icons

[aminya]

This defers the loading of mdi icons until they are called. It improves the loading time (50ms->35ms).

[aminya]

@ericcornelissen @suda I cannot seem to be able to propagate button style (size, colors, etc) to the icon (svg). I would appreciate any help here.

There is also @mdi/svg: https://github.com/Templarian/MaterialDesign-SVG, which every icon is a separate svg file. That could be another alternative.

[ericcornelissen]

I cannot seem to be able to propagate button style (size, colors, etc) to the icon (svg). I would appreciate any help here.

Could you provide a working example outside of Atom (in Codepen or a similar service) that doesn't style the SVG the way you expect it to, that would make it a little easier to understand what isn't working and how experimenting with how it can be resolved.

What I can say based just on your comment: Note that for the color you probably need to use the CSS attribute fill instead of color to add color the SVG and for the size you need to take into account the viewBox of the SVG.

[aminya]

What I can say based just on your comment: Note that for the color you probably need to use the CSS attribute fill instead of color to add color the SVG and for the size you need to take into account the viewBox of the SVG.

Yes, I should do that instead. I thought SVG is like other HTML elements. Isn't there a way to wrap SVG in an HTML element that allows CSS formatting?

[ericcornelissen]

Yes, I should do that instead. I thought SVG is like other HTML elements. Isn't there a way to wrap SVG in an HTML element that allows CSS formatting?

As far as I know, the way you would want it to work is only possible with icon fonts.

[aminya]

@ericcornelissen This now works.

Now we only need to fix the tests! I cannot query the svg element anyhow. 😞

[aminya]

Besides this PR, I saw another very cool framework which is called iconify. I am trying to learn how it works. Using that we can expand the number of supported icons and also improve the speed.

This is me trying to make it work offline: iconify/iconify#31
This is an example of how it works: iconify/iconify#30