== Background
We're currently using data URI embedding for CSS-only icon SVGs, which was previously needed to change the color via the SVG's `fill` attribute. This impacts performance when the CSS-only icon mixin is used in render-blocking styles, as the icons are loaded with the initial CSS, potentially causing delays, whereas a URL pointing to an SVG could be loaded asynchronously. This is particularly noticeable in Minerva/Vector, which make heavy use of icons and cannot use the Codex mixin without introducing an addition 10kb+ of render blocking CSS which would impact first paint and other performance metrics.
We are no longer using `fill` for icons in browsers that support `mask-image` since `background-color` is used to set the color instead, and it's also no longer used for the fallback `background-image` URLs, where we use `opacity` to approximate grayscale colors instead. We should explore supporting URL-hosted SVG files in the CSS-only icon mixin, rather than only supporting data URI-embedded SVGs.
Thanks to @Jdrewniak for reporting this.
For example consider the associated bytes for these 2 icons (first using ResourceLoaderImageModule, second using Codex):
* User icon in Minerva
```
.minerva-icon--userAvatarOutline {
background-image: url(/w/load.php?modules=skins.minerva.overflow.icons&image=userAvatarOutline&format=original&lang=en&skin=minerva&version=1o6ca);
}
```
* Codex Echo notification in Minerva:
```
.minerva-icon--bellOutline-base20 {
-webkit-mask-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="20"height="20"viewBox="0 0 20 20"fill="%23000000"><path d="M11.5 2.19C14.09 2.86 16 5.2 16 8v6l2 2v1H2v-1l2-2V8c0-2.8 1.91-5.14 4.5-5.81V1.5C8.5.67 9.17 0 10 0s1.5.67 1.5 1.5zM10 4C7.79 4 6 5.79 6 8v7h8V8c0-2.21-1.79-4-4-4M8 18h4c0 1.1-.9 2-2 2s-2-.9-2-2"/></svg>);
mask-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="20"height="20"viewBox="0 0 20 20"fill="%23000000"><path d="M11.5 2.19C14.09 2.86 16 5.2 16 8v6l2 2v1H2v-1l2-2V8c0-2.8 1.91-5.14 4.5-5.81V1.5C8.5.67 9.17 0 10 0s1.5.67 1.5 1.5zM10 4C7.79 4 6 5.79 6 8v7h8V8c0-2.21-1.79-4-4-4M8 18h4c0 1.1-.9 2-2 2s-2-.9-2-2"/></svg>);
}
```
== User story
As a developer I want to use Codex for rendering all icons in my UI
As a user I want icons to render consistently across the UI.
== Requirements
[] On Minerva when logged in, viewing dark mode, the Echo notification should look identical to the other icons
[] There should be no significant change in the stylesheet size when Vector/Minerva use the codex mixin.
== Acceptance criteria
[] There should be a mixin available that can be called that renders a mask-image using a URL rather than the embedded SVG
== Communication criteria - does this need an announcement or discussion?
No visual changes expected - as this is is a change to the platform.
== Rollback plan
It's assumed that any change will be opt in e.g. a new mixin or a new parameter to the existing mixin to allow the web team to carefully adopt this.
//This task was created by Version 1.0.0 of the [[ https://mediawiki.org/w/index.php?title=Reading/Web/Request_process | Web team task template ]] using [[ https://phabulous.toolforge.org/ | phabulous ]] //