#### 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
- [] The Icon component is updated to use relative sizing
- [] Relative sizing is well-documented on the component spec sheet in Figma and on the Icon component's demo page
- [] Hacks to make icons relatively sized are removed from the Message and MenuItem components