Gin cuts a toolbar icon out of a mask, so the Booking item is the empty square the stylesheet exists to prevent

yoyaku_ui/css/toolbar-icons.css gives the Booking section its glyph the way core's toolbar draws every one of its own: a background-image on the item's ::before.

Gin builds the same item the other way round. It fills that pseudo-element with a flat color and cuts it to shape, background: var(--gin-icon-color) with mask-image: var(--icon), and it gives the variable it cuts with a default on the toolbar itself: an empty rounded square, for every item it has no drawing of its own for. Both halves reach this item. The background shorthand drops the picture the stylesheet paints, and the mask is that empty square, so on a Gin site the Booking item is the one in the bar with nothing in it, which is the symptom this stylesheet was written to prevent.

Measured on Drupal 11.4.7 with Gin 5.0.15, horizontal toolbar: the item's ::before computes background-image: none and mask-image: url(.../sprite.svg#fallback-view), while Gin's own items compute their own glyph at the same 18px by 18px.

Proposed resolution

Hold the drawing in one custom property and hand it to both: to background-image for core, which paints the picture and takes its color from it, and to --icon for Gin, which reads only the alpha and paints the color itself. That is also why the mask is given the gray glyph and needs no is-active twin: hover, active and dark mode stay Gin's to paint, with the rules it paints its own items with.

One variable rather than a second copy of the URL-encoded SVG, because two copies drift the first time one of them is touched and nothing about a toolbar fails when they do. The canvas stays square, since Gin sizes the mask 18px by 18px and squashes anything wider than it is tall into it.

--icon is Gin's variable and nothing else reads it, so the rule costs a site without Gin one custom property nobody looks up.

Verification

ToolbarIconTest gains a case that reads the shipped stylesheet: the item hands --icon a variable, background-image is handed the same one, and that variable is where the drawing is written down. It fails against the stylesheet as it was.

AI-Generated: Yes (Claude Code was used to help draft this issue summary and to write the code and tests on the merge request. I reviewed and ran the work myself before posting it.)