From ca09dce90cd59530896cf9f6d1120b734e051285 Mon Sep 17 00:00:00 2001
From: Bendik Aagaard Lynghaug <bendik.lynghaug@gmail.com>
Date: Wed, 12 Aug 2026 23:36:14 +0200
Subject: [PATCH] Feature icons: masked span painted by currentColor, not <img>

An image can't take the text color; a mask-image painted by
background-color can. Icons now follow --feature-accent when the
feature declares a color, and the surrounding text color otherwise.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app.rs     | 12 ++++++++++--
 style/main.css |  7 +++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/app.rs b/src/app.rs
index bc8af67..70e5e13 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -699,8 +699,16 @@ fn AlternativeCard(
                             let icon = feature.icon.clone();
                             view! {
                                 <div class="feature" style:--feature-accent=color>
-                                    {icon.filter(|i| is_safe_icon_name(i)).map(|icon| view! {
-                                        <img class="feature-icon" src=format!("https://api.iconify.design/{icon}.svg") alt="" />
+                                    {icon.filter(|i| is_safe_icon_name(i)).map(|icon| {
+                                        // Masked span, not <img>: an image can't take
+                                        // currentColor, a mask painted by background-color can.
+                                        let u = format!("https://api.iconify.design/{icon}.svg");
+                                        view! {
+                                            <span
+                                                class="feature-icon"
+                                                style=format!("mask-image:url({u});-webkit-mask-image:url({u})")
+                                            ></span>
+                                        }
                                     })}
                                     <Show when={
                                         let name = feature.name.clone();
diff --git a/style/main.css b/style/main.css
index 6f794aa..5ba931c 100644
--- a/style/main.css
+++ b/style/main.css
@@ -365,6 +365,13 @@ main.not-found {
   width: 1.3rem;
   height: 1.3rem;
   margin: 0.1rem 0.6rem 0.4rem 0;
+  background-color: var(--feature-accent, currentColor);
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  -webkit-mask-position: center;
 }
 
 .feature h3 {