Let <x-icon> pick the optical size 20 cut

M3's optical size axis redraws a symbol so its strokes look equally heavy at
every size; drawing the 24 cut at 20px thins them by about a sixth (styles.md
§ Icons). `optical` picks the cut — 24 by default, 20 for an icon drawn at 20px
or smaller — and combines with `filled`; anything else falls back to 24, so no
caller can land on a folder that does not exist. SvgFile::symbol() takes the
size as a fourth argument and resolves the `-20` folders; the catalogue is the
same in both cuts, so symbolNames() and DesignGuard's icon-name check are
unchanged. The callers that size their own icons pass it in a later step.

Plan step 10; finding C16.

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

resources/boost/skills/livewire-material-development/SKILL.md

@@ -179,15 +179,18 @@ Your export is ready.
 
 ### `<x-icon>`
 
-A Material Symbol (Rounded, weight 400, grade 0, 24px), inline. Every symbol on fonts.google.com/icons exists, by Google's name with underscores. An unknown name throws.
+A Material Symbol (Rounded, weight 400, grade 0), inline. Every symbol on fonts.google.com/icons exists, by Google's name with underscores. An unknown name throws.
 
 | Prop | Default | |
 |---|---|---|
 | `name` | required | `calendar_month`, `cloud_upload`, `content_copy` |
 | `filled` | `false` | the filled symbol — M3 uses it for active or selected |
+| `optical` | `24` | the cut the glyph is drawn from, `24` or `20`; anything else falls back to 24 |
 | `label` | `null` | names the icon for screen readers when it carries the meaning alone; otherwise it is `aria-hidden` |
 
-24px (`size-6`) unless a `size-*`, `w-*` or `h-*` class is passed. Colour follows the text: `<x-icon name="lock" class="size-5 text-on-surface-variant" />`.
+24px (`size-6`) unless a `size-*`, `w-*` or `h-*` class is passed. Colour follows the text: `<x-icon name="lock" class="size-5 text-on-surface-variant" optical="20" />`.
+
+M3's optical size axis redraws a symbol so its strokes look equally heavy at every size, so **an icon drawn at 20px or smaller (`size-5` and below) takes `optical="20"`**; scaling the 24 cut down thins its strokes by about a sixth. The cut is not a size — pass both, and where a component sizes an icon for you, pass the cut alongside the size class.
 
 ### `<x-shape>`
 

resources/views/components/icon.blade.php

@@ -1,9 +1,17 @@
-{{-- A Material Symbol (Rounded, weight 400, grade 0, optical size 24), inline.
+{{-- A Material Symbol (Rounded, weight 400, grade 0), inline.
 
      `name` is Google's name for it, underscores and all (`arrow_back`), as listed on
      fonts.google.com/icons; every symbol Google publishes is available, and an unknown name
      throws. `filled` draws the filled state, which in M3 means active or selected.
 
+     `optical` is the cut the glyph is drawn from, `24` (the default) or `20`; anything else
+     falls back to 24, and `filled` combines with either. M3's optical size axis redraws a
+     symbol so its strokes look equally heavy at every size, which means an icon drawn at
+     20px or smaller uses the 20 cut: scaling the 24 cut down to 20px instead makes its
+     strokes about a sixth too thin (docs/reference/m3/styles.md § Icons). The cut and the
+     size are separate decisions, so a caller that draws `size-5` passes `optical="20"`
+     with it; the components that size their own icons do that for you.
+
      Decorative by default and hidden from screen readers, because nearly every icon sits
      beside words that already say what it means. Pass `label` when the icon alone carries
      the meaning.
@@ -16,6 +24,7 @@
     'name',
     'filled' => false,
     'label' => null,
+    'optical' => 24,
 ])
 
 @php
@@ -31,4 +40,4 @@
         ]));
 @endphp
 
-{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes) }}
+{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes, (int) $optical) }}