feat(web): use the Material settings gear and add rotate icons

web/src/ui/Icon.tsx

@@ -22,6 +22,8 @@ const PATHS = {
   tablet: 'M5 4h14v16H5z M11 17h2',
   more: 'M5 12h.01 M12 12h.01 M19 12h.01',
   menu: 'M4 7h16 M4 12h16 M4 17h16',
+  rotateLeft: 'M4 12a8 8 0 103-6.2 M4 4v5h5',
+  rotateRight: 'M20 12a8 8 0 11-3-6.2 M20 4v5h-5',
   users: 'M9 11a3 3 0 100-6 3 3 0 000 6z M3 19a6 6 0 0112 0 M16 6a3 3 0 010 6 M18 19a5 5 0 00-3-4.6',
   undo: 'M9 14L4 9l5-5 M4 9h10a6 6 0 010 12h-3',
   warn: 'M12 4l9 16H3z M12 10v4 M12 17h.01',
@@ -38,10 +40,12 @@ const PATHS = {
   chevronLeft: 'M15 6l-6 6 6 6',
   panelRight: 'M4 5h16v14H4z M15 5v14',
   bell: 'M6 16V11a6 6 0 0112 0v5l2 2H4z M10 20h4',
-  settings: 'M12 8a4 4 0 100 8 4 4 0 000-8z M19.4 15a1.7 1.7 0 00.34 1.87l.06.06-1.7 2.94-.08-.02a1.7 1.7 0 00-1.72.58l-.05.07h-3.4l-.04-.08a1.7 1.7 0 00-1.7-.6l-.09.03-1.7-2.94.06-.07A1.7 1.7 0 009.7 15l-.08-.05v-3.4l.08-.04a1.7 1.7 0 00.6-1.7l-.03-.09 2.94-1.7.07.06a1.7 1.7 0 001.87.34l.06-.04h3.4l.04.08a1.7 1.7 0 001.7.6l.09-.03 1.7 2.94-.06.07A1.7 1.7 0 0021.8 14l.08.05v3.4z',
+  settings: 'M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z',
 } as const;
 
+/** Material Icons 的实心图标,按填充渲染;其余是 1.5 描边线条图标 */
 export type IconName = keyof typeof PATHS;
+const FILLED: ReadonlySet<IconName> = new Set<IconName>(['settings']);
 
 interface Props {
   name: IconName;
@@ -54,8 +58,8 @@ export function Icon({ name, size = 20 }: Props) {
       width={size}
       height={size}
       viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
+      fill={FILLED.has(name) ? 'currentColor' : 'none'}
+      stroke={FILLED.has(name) ? 'none' : 'currentColor'}
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"