Rewrite the showcase's Icons section without Tailwind

Plan step 38: the filter row is now real components — <x-input
icon="search"> and two <x-checkbox>s — instead of a bespoke bordered
label and accent-coloured native inputs; the result grid is
<x-grid min-item="120px"> of <x-surface as="li">/<x-stack> tiles.
The fetched symbol's mask stays the view's own x-bind:style (its
shorthand depends on the fetched name), but the size it toggles
between 24 and 20px is now the data-md-showcase-icon-size attribute
a script sets, never a class, drawn by data-md-showcase-icon-mask in
showcase.css.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/showcase.css

@@ -261,4 +261,19 @@
         border-radius: var(--md-sys-shape-corner-full);
         background-color: var(--md-sys-color-tertiary);
     }
+
+    /* Icons: one search result's mask (its `mask` shorthand is the fetched symbol, so it stays the
+       view's own x-bind:style), 24px by default and 20px once optical size 20 is on — the state a
+       script toggles as data-md-showcase-icon-size, never a class. */
+    [data-md-showcase-icon-mask] {
+        display: block;
+        width: 24px;
+        height: 24px;
+        background-color: currentColor;
+    }
+
+    [data-md-showcase-icon-mask][data-md-showcase-icon-size='20'] {
+        width: 20px;
+        height: 20px;
+    }
 }