perf: reduce Material Symbols font payload (#228)

Specify icon names to load from Material Symbols font, reducing the font
payload from ~1MB to ~9KB.

Note that all icons used *must* be added to this list.

**Before**

![image](https://github.com/user-attachments/assets/dc81061b-f9bb-4aa9-a819-fe86e8728d62)

**After**

![image](https://github.com/user-attachments/assets/6f6917a0-0966-4d7a-92f5-48a941ff519a)

Author: incognitojam

index.html

@@ -8,26 +8,10 @@
     <title>connect</title>
 
     <link rel="manifest" href="/manifest.json" />
-    <link
-      href="/images/favicon-16x16.png"
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-    />
-    <link
-      href="/images/favicon-32x32.png"
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=block"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300..800&family=JetBrains+Mono:wght@400;500&display=swap"
-    />
+    <link href="/images/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16" />
+    <link href="/images/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32" />
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300..800&family=JetBrains+Mono:wght@400;500&display=swap" />
 
     <script defer data-domain="connect.comma.ai" src="https://plausible.io/js/script.js"></script>
   </head>

src/components/material/Icon.tsx

@@ -8,6 +8,13 @@ export type IconProps = {
   size?: '20' | '24' | '40' | '48'
 }
 
+/**
+ * Use an icon from the Material Symbols library.
+ *
+ * Note: Icon names <strong>must</strong> be added to the icons list in vite.config.ts.
+ *
+ * @see https://fonts.google.com/icons
+ */
 const Icon: Component<IconProps> = (props) => {
   // size-20, 24 etc. defined in root.css
   const size = () => `size-${props.size || '24'}`

src/pages/auth/login.tsx

@@ -2,6 +2,7 @@ import { getGoogleAuthUrl, getAppleAuthUrl, getGitHubAuthUrl } from '~/api/auth'
 import { setAccessToken } from '~/api/auth/client'
 
 import Button from '~/components/material/Button'
+import Icon from '~/components/material/Icon'
 
 const ACCESS_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDg1ODI0NjUsIm5iZiI6MTcxNzA0NjQ2NSwiaWF0IjoxNzE3MDQ2NDY1LCJpZGVudGl0eSI6IjBkZWNkZGNmZGYyNDFhNjAifQ.g3khyJgOkNvZny6Vh579cuQj1HLLGSDeauZbfZri9jw'
 
@@ -86,13 +87,8 @@ export default function Login() {
         </div>
 
         <Button
-          class="gap-4"
           onclick={loginAsDemoUser}
-          trailing={
-            <span class="material-symbols-outlined icon-outline">
-              chevron_right
-            </span>
-          }
+          trailing={<Icon>chevron_right</Icon>}
         >
           Try the demo
         </Button>

vite.config.ts

@@ -14,6 +14,29 @@ export default defineConfig({
       project: 'new-connect',
       telemetry: false,
     }),
+    {
+      name: 'inject-material-symbols',
+      transformIndexHtml(html) {
+        // Specify icon names to load only the necessary icons, reducing font payload.
+        // https://developers.google.com/fonts/docs/material_symbols#optimize_the_icon_font
+        const icons = [
+          'add', 'arrow_back', 'camera', 'check', 'chevron_right', 'clear', 'close', 'directions_car', 'download',
+          'error', 'file_copy', 'info', 'menu', 'my_location', 'open_in_new', 'payments', 'person', 'progress_activity',
+          'satellite_alt', 'search', 'settings', 'sync',
+        ].toSorted().join(',')
+        return {
+          html,
+          tags: [{
+            tag: 'link',
+            attrs: {
+              rel: 'stylesheet',
+              href: `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0&icon_names=${icons}&display=block`,
+            },
+            injectTo: 'head',
+          }],
+        }
+      }
+    },
   ],
   server: {
     port: 3000,