Background
The icon component's size is current set via absolute width and height attributes on the <svg> element:
<!-- Simplified version of the Icon template --> <template> <span class="cdx-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" > ... </svg> </span> </template>
However, icons are meant to have the same level of importance in an interface, when it comes to providing information to users and helping them go through processes, as textual content—for example, an icon-only button. Therefore, like text, icons should be able to size up with font size, which means their size must be set in relative figures within the Icon component.
This would be an ideal application for rem units, but enabling the user of rems within a MediaWiki context is a complex issue that will take time to discuss and resolve. As a stop-gap measure, we will use ems to relatively size the icon component.
Acceptance criteria
Design resources
- Relative sizing is well-documented on the component spec sheet in Figma and on the Icon component's demo page
Development
- The Icon component is updated to use relative sizing
- Hacks to make icons relatively sized are removed from the Message and MenuItem components