Size icons and shapes with a prop instead of a Tailwind class

<x-icon size> writes --md-icon-size (24px by default) and takes the optical-size-20
cut for 20px or less, as M3 asks; mirror-rtl flips a directional symbol. <x-shape
size> writes --md-shape-size. Both draw from plain-CSS stylesheets in
material.components, gathered in components.css until all.css replaces it; a
caller's size class still wins while the other components are rewritten.
Plan steps 35 and 36, the prop every component rewrite depends on.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/icon.blade.php

@@ -16,28 +16,44 @@
      beside words that already say what it means. Pass `label` when the icon alone carries
      the meaning.
 
-     24px unless the caller sizes it. The default is added only when no size class is passed,
-     rather than merged under one: `size-6 size-4` compiles to whichever Tailwind emits last,
-     not to the one the caller wrote. --}}
+     `size` is the drawn size in px (`16`, `18`, `20`, `24`, `32`, `40`, `48` …, any whole number
+     from 8 to 256; 24 when left out), written as `--md-icon-size` and drawn by
+     resources/css/components/icon.css. An icon given a size of 20 or less takes the 20 cut
+     unless `optical` says otherwise, which is M3's rule. A size class from the caller still
+     works while the components that pass one are rewritten (plan step 36): a utility outranks
+     the package's layer.
+
+     `mirror-rtl` flips a directional symbol (an arrow, a chevron) in a right-to-left document,
+     as M3's bidirectionality rules ask; symbols that mean the same in both directions do not
+     take it. --}}
 
 @props([
     'name',
     'filled' => false,
     'label' => null,
-    'optical' => 24,
+    'optical' => null,
+    'size' => null,
+    'mirrorRtl' => false,
 ])
 
 @php
-    $sized = preg_match('/(^|\s)(size|w|h)-/', (string) $attributes->get('class')) === 1;
+    $size = filter_var($size, FILTER_VALIDATE_INT, ['options' => ['min_range' => 8, 'max_range' => 256]]) ?: null;
+    $optical = match (true) {
+        in_array((string) $optical, ['20', '24'], true) => (int) $optical,
+        $size !== null && $size <= 20 => 20,
+        default => 24,
+    };
 
     $attributes = $attributes
-        ->class(['shrink-0', 'size-6' => ! $sized])
         ->merge(array_filter([
+            'data-md-icon' => true,
+            'data-md-mirror-rtl' => $mirrorRtl ? true : null,
+            'style' => $size !== null ? "--md-icon-size: {$size}px" : null,
             'aria-hidden' => $label === null ? 'true' : null,
             'aria-label' => $label,
             'role' => $label === null ? null : 'img',
             'focusable' => 'false',
-        ]));
+        ], fn ($value): bool => $value !== null));
 @endphp
 
-{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes, (int) $optical) }}
+{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes, $optical) }}