feat: implement universal icon system with Phosphor Icons

- Install @phosphor-icons/react package
- Create centralized Icon component with size/weight/color variants
- Create icon registry with 34 icons across 5 categories
- Replace all raw Unicode symbols with proper icon components
- Add icons to navigation, buttons, status indicators, git operations
- Add icon CSS with consistent sizing and spacing
- Fix type definitions for Phosphor icon compatibility

Quality gates: typecheck ✓, lint ✓, build ✓ (375KB bundle)

apps/web/src/pages/settings.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 
 import { getUserConfig, updateUserConfig, type UserConfig, type UserConfigUpdate } from "../api/settings";
+import { Icon } from "../components/icon";
 
 type SettingsStatus = "loading" | "ready" | "error";
 
@@ -66,6 +67,7 @@ export const SettingsPage = () => {
       <section className="stack">
         <p>Failed to load settings</p>
         <button className="secondary-button" onClick={() => void loadConfig()} type="button">
+          <Icon name="refresh" size="sm" />
           Retry
         </button>
       </section>
@@ -132,7 +134,17 @@ export const SettingsPage = () => {
 
       <div className="settings-actions">
         <button className="primary-button" onClick={() => void handleSave()} type="button">
-          {saveStatus === "saving" ? "Saving..." : "Save Settings"}
+          {saveStatus === "saving" ? (
+            <>
+              <Icon name="loading" size="sm" />
+              Saving...
+            </>
+          ) : (
+            <>
+              <Icon name="save" size="sm" />
+              Save Settings
+            </>
+          )}
         </button>
         {saveStatus === "saved" && <span className="success-text">Settings saved!</span>}
         {saveStatus === "error" && <span className="error-text">Failed to save</span>}