Hover over the Search button. The word turns purple. So does the ring of the magnifying glass. Its handle stays black.

That ring is a useful clue. The button’s hover rule works, and its color reaches the icon. Before changing any CSS, look at what draws the handle.

Reproduce the two-color magnifier

Save this snippet as demo.html and open it in a browser. Hover over the button, or press Tab to focus it. The deliberately large icon makes the short black line easy to spot.

<!doctype html> <html lang="en"> <meta charset="utf-8"> <title>Find the black handle</title> <style> button { display: inline-flex; align-items: center; gap: .4em; padding: .4em .7em; color: #111; background: white; border: 2px solid currentColor; border-radius: .4em; font: 2rem system-ui; } button:hover, button:focus-visible { color: #6932bc; } button:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; } </style> <svg width="0" height="0" aria-hidden="true" style="position:absolute"> <symbol id="search" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"> <circle cx="10" cy="10" r="6"/> <path d="M14.3 14.3 20 20" stroke="#111"/> </g> </symbol> </svg> <button type="button"> <svg width="32" height="32" aria-hidden="true"><use href="#search"/></svg> Search </button> </html>

At rest, everything looks right because the button and the handle happen to use the same shade of black. The defect only appears when their colors should change together.

Follow the reference in DevTools

  1. Inspect the Search button. Under its visible SVG you’ll find <use href="#search">. That fragment points to the drawing shared by every instance of this icon.
  2. In the Elements panel, press Ctrl+F (Cmd+F on macOS) and search for symbol#search. Expand the symbol and its group. The circle draws the lens. The short path draws the handle.
  3. Compare the two shapes. The circle has no stroke value of its own, so it inherits the group’s stroke. The path explicitly requests #111. Changing the button’s color can’t change that literal value.
  4. Double-click the path’s stroke="#111" attribute in the Elements panel, delete the attribute and press Enter. Move the pointer back over the button. The handle should now turn purple with the ring.

Keep the one-line fix

The DevTools edit disappears when you reload. Make the same change in the source that produces the sprite:

- <path d="M14.3 14.3 20 20" stroke="#111"/> + <path d="M14.3 14.3 20 20"/>

The group already defines the stroke for the whole magnifier. Removing the handle’s override lets both shapes follow the same rule. If your sprite is generated, edit the input icon and regenerate it so the next build keeps the fix.

Check the state that exposed it

Reload, then press Tab with the pointer away from the button. The focus outline, label, ring and handle should all turn purple. Move focus away and they should return to black. A screenshot of the idle button alone would look identical before and after the repair.

Apply this edit only to shapes intended to follow the text color. An amber status dot inside an otherwise monochrome icon may have a fixed fill for a reason.

For the steps that turn individual icons into reusable symbols, see our SVG sprite tutorial.