Low support for SVG icons

[vizath]

As specified in #1475, there seems to have a performance drawback using SVG icons over fonts. I'd like to know, is there any benchmarks done for this ?

Also, why is there so much poor support for SVG icons in general (doc, components, etc). There is no easy way to go get icons from the base object (require('material-ui')) and components like Toolbar or DropDownIcon do not even support SVG icons, only FontIcon.

[vizath]

I did some benchmarks: http://imgur.com/a/h4KL2

After a few retries, numbers seems to average to:

svg initial load time (evaluate script): 900ms
svg render time (inserting DOM): 750ms
svg paint finished after: 50ms

css initial load time (evaluate script): 900ms
css render time (inserting DOM): 650ms
css paint finished after: 500ms (includes the time to load the font)

// if ttf is already loaded
css initial load time (evaluate script): 900ms
css render time (inserting DOM): 450ms
css paint finished after: 300ms

It doesn't seem to take more time to load the page, the single http request for fonts is not a bottleneck in the test.
It seems to take a bit more time adding <svg> elements to the DOM than <span>
The time between the inserted DOM and the final render of the actual icons is way faster in SVG than it is with fonts when the font is not already loaded.
When the font is already loaded, the full render time seems to be equivalent.
Note: No production optimizations where done.

Other than performance, I think that SVG icons are more easily maintainable.

I'd like to have your thoughts on this.
I can publish my test cases if needed.

[oliviertassinari]

@vizath Interesting benchmark!

Other than performance, I think that SVG icons are more easily maintainable.

I agree

[mbrookes]

Docs are updated, DropDownIcon is deprecated, and SVP icon performance we have no control over 😄. Hope that covers it, but please reopen if not.