This appears to have been caused by the change from background-image to mask-image for CSS-only icons. In particular, the Select component's use of the CSS-only icon mixin passes in center right 12px for the mask-position property; that was a valid value for background-position but is not for mask-position.

But even fixing that isn't sufficient, because masking seems to be designed to show nothing except the icon. So we may have to change the Select component to use something different for its icon, maybe an absolutely positioned :after element.

Change 1006589 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Select: Use background rules for the CSS-only icon

https://gerrit.wikimedia.org/r/1006589

I can't believe I found this but I found another solution that I think could work:

.cdx-select:enabled {
    /* Set the background for the whole select. --background-color-interactive-subtle: #eaecf0; */ 
    background-color: var( --background-color-interactive-subtle );
    /* Set the (pure black version of the) icon image as a background, with a solid background of the color we want the icon to be on top */
    /* --background-color-base: #202122; */
    background-image: linear-gradient( var( --background-color-base ), var( --background-color-base ) ), url('data:image/svg+xml;utf8,<svg fill="%23000000">...</svg>');
    /* Contain the image + overlay color to just the area where we want the icon to be */
    background-position: center right 12px;
    background-repeat: no-repeat;
    background-size: max( 0.75em, 12px );
    /* Magic: make the darker grey background blend into the icon so that it lightens the icon; but don't apply that same transformation between the icon and the overall background */
    background-blend-mode: lighten, normal;
}

I haven't tested a night mode version of this yet but it seems promising! (I do wonder if lighten has to change to darken in that case, or if there's a different keyword we could use.)

If it does work, I wonder if this could even replace our use of mask-image, since background-blend-mode has better browser support.

Wow, amazing solution—this works perfectly for the Select icon! I agree we should explore implementing this instead of mask-image for all CSS icons. My biggest questions are:

• Could this work with icons in buttons (I'm not sure how it would, since the color needs to change in the Button code when the state changes)? If not, are we okay with using different methods for icons inside and outside of buttons again?
• Can we easily handle night mode, e.g. with a token for the blending mode? Is that even necessary?

I've tried implementing this for all non-button icons and ran into a problem: the icon element must have a set background color. You can see this in action here, where I've set the background color of the second icon:

background-color: inherit only works if the parent has a set background-color, and I don't think we can make any assumptions about what the background-color should be.

Change 1006946 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] [proof of concept] Use background blending mode for CSS icons

https://gerrit.wikimedia.org/r/1006946

I've opened a proof-of-concept patch using background-blend-mode in the CSS icon mixin so we can play around with making it work for all icons. If we can't make it work, I'll update my existing Select patch to use the background-blend-mode trick just in Select.vue.

We decided that the background-blend-mode idea has too many problems. It requires a white background, and still doesn't work in night mode without further modifications (changing "lighten" to "darken" for example, and changing the icon's fill color to white). We may be able to work around these using even cleverer background-blend-mode tricks, but we decided not to pursue that for now. Instead, we decided to fix the immediate problem and make Select work again, even if that means it only works in day mode for now.

Change 1006589 merged by jenkins-bot:

[design/codex@main] Select: Use background rules for the CSS-only icon

https://gerrit.wikimedia.org/r/1006589

Change 1008950 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/core@master] Update Codex from v1.3.3 to v1.3.4

https://gerrit.wikimedia.org/r/1008950

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/cd11cbf23a/w

Change 1008950 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.3.3 to v1.3.4

https://gerrit.wikimedia.org/r/1008950