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

@@ -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! {
+                                    {icon.filter(|i| is_safe_icon_name(i)).map(|icon| {
-                                        <img class="feature-icon" src=format!("https://api.iconify.design/{icon}.svg") alt="" />
+                                        // 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();

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 {