Currently, as of v0.20.0, we're outputting IconElement-icon/IndicatorElement-indicator in every widget using those mixins, no matter if they are used or not.
Although I'd prefer not to see them in the rendered DOM tree at all, minimizing the overhead by not outputting them on case by case might be not useful from a JS architecture and developer time investment perspective.
What I would want us to consider though is a generalization of the behaviour, removing treatment in places like ButtonElement and use something like:
.oo-ui-widget { .oo-ui-iconElement-icon, .oo-ui-indicatorElement-indicator { display: none; } &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator, &.oo-ui-labelElement .oo-ui-labelElement-label { // Vertical align text display: inline-block; vertical-align: middle; } .theme-oo-ui-widget(); }
It would remove the non-used elements from the render tree, so being a simplification and additionally a minor performance improvement.
Thoughts?
