Feature summary (what you would like to be able to do and where):
Simplify CSS-only icon usage by introducing a generic icon class .cdx-icon and size modifier classes (.cdx-icon--size-medium, .cdx-icon--size-small, .cdx-icon--size-x-small). These classes would be analogous to the CSS-only button classes, so the usage for both button and icons would be consistent.

Once we have these classes, we no longer need the .cdx-button__icon class, and we can remove all the parameters from .cdx-mixin-css-icon except for @param-icon, greatly simplifying usage and flexibility of codex icons.

Usage could now look like this in CSS

.cdx-icon--tray {
  .cdx-mixin-css-icon( @cdx-icon-tray );
}

And now the same icon class can be used for a variety of usages

<a><span class="cdx-icon cdx-icon--tray"></span> Icon </a>
<button class="cdx-button"><span class="cdx-icon cdx-icon--tray"></span> Icon inside button, no need for extra classes or param </button>
<a><span class="cdx-icon cdx-icon--tray cdx-icon--size-small"></span> Icon with different size, no need for an extra icon class </a>

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):

• Multiple codebases currently add a generic icon class in order to style icons, resulting in duplicated CSS (i.e vector-icon, minerva-icon, mf-icon and popups-icon).
• Cases where the same icon needs to be used with different sizes, or with different markup (inside a button, and not inside a button)

I.e. in Vector, we have 2 places where we use the watchlist icon, one is in a button next to the user links dropdown, and the other is inside the user links dropdown on small viewports. With the current implementation, we need to 2 separate icon classes for the 2 use cases of the watchlist icon.

Benefits (why should this be implemented?):

• Consistency with CSS-only button classes and usage
• Consistency with usage of legacy .mw-ui-icon classes, making it easier to migrate to Codex icons. This would help us completely deprecate mediawiki.ui.icon
• Improves performance by avoiding the need to define multiple icon classes for the same icon.
• Improves developer UX and reduces likelihood of errors. https://wikimedia.slack.com/archives/C03DKGSEPL2/p1715024672415269
• 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.