**Feature summary** (what you would like to be able to do and where):
A generic codex icon class like `.cdx-icon` would effectively replace `.mw-ui-icon`. Size icon classes (`.cdx-icon--size-medium`, `.cdx-icon--size-small`, `.cdx-icon--size-x-small`) would replace `.mw-ui-icon-small`. These classes would be analogous to the `cdx-button` and `cdx-button--size-medium` classes, and could be implemented like so:
```
.cdx-icon {
.cdx-mixin-css-icon-background();
.cdx-mixin-css-icon-size();
.cdx-mixin-css-icon-alignment();
}
.cdx-icon--size-small {
.cdx-mixin-css-icon-background( @size-icon-small );
.cdx-mixin-css-icon-size( @size-icon-small );
}
```
**Use case(s)** (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):
Currently we have the same duplicated CSS across multiple codebase with `vector-icon`, `minerva-icon`, `mf-icon` and `popups-icon`.
**Benefits** (why should this be implemented?):
While implementing codex CSS only icon across Web maintained skins/extensions, we found these classes very helpful during the migration for the following reasons
1. They allow drop in replacements with `mediawiki.ui.icon` classes, making adoption easier, and make it easier to remove `mediawiki.ui.icon`
2. They allow skins/extensions to continue using icon resource loader. Because resource loader icons are usually optimized to be bundled with modules that are loaded only when needed (i.e. js modules), and because resource loader icons are not inlined like with Codex, it is difficult to completely replace them with Codex icon mixins with impacting performance. A 'base' icon class without a specific background image allows skins/extensions to benefit from Codex icons styles without having to deal with the performance hit.
3. Generic icon classes are needed in CSS in general (i.e. they are used currently to set the space between icon and text in icon buttons). Perhaps the `cdx-button__icon` and `@param-is-button-icon` could even be replaced or removed if a generic icon class was used, which would simplify icon button usage and documentation.
4. Providing classes that correlate with a components props (i.e. size) work nicely with the component based classes and templates that are commonly used in Minerva and Vector. This architecture is closely aligned with how Vue components are implemented, and allows us to use data to render icons, rather than purely from CSS. These classes would also be inline with how the CSS only button classes work.