ltr vs rtl is not a performance consideration as the direction icons are embedded once at CSS processing of RL. It wouldn't have a performance improvement to use for example [[ https://stackoverflow.com/a/19143438/1696030 | CSS transform]]

Inspiration for another way to implement SVG color filling: https://github.com/trysound/postcss-inline-svg ?

Having separate SVG images of different states result in flickering of image when changing state, like :normal and :hover.

This should only happen in development or debug mode. In production they are embedded and load directly from memory without a flash in between. More details at https://www.mediawiki.org/wiki/ResourceLoader/Features#Embedding.

Even if at some point we stop using image embedding, a design requirement will be that it must preload images used above the fold and preload alternate states before they are triggered (e.g. finish loading a dialog before displaying, and include hover states in the secondary warm up or something like that).

@Krinkle You're right, I was misleadingly alerted by the demo implementation.

@Jdlrobson and myself were discussing different performance impacts of replacing inlined SVGs via @embed like the -invert modifiers with [[ https://developer.mozilla.org/en-US/docs/Web/CSS/filter#invert()_2 | CSS filter invert ]] for probably enhancing experience in supporting browsers.

@Krinkle, we have had a discussion about this before, would you share your opinion and your insights here again? Let's leave aside browser support for a moment, we want to focus on the performance and RL side of it.