refactor: use material gear icon

Author: dbirman

web/public/icons/gear.svg

@@ -188,9 +188,9 @@ export function createAssetsView(coord) {
   header.innerHTML = '<h2>Data Assets</h2>';
 
   const settingsBtn = document.createElement('button');
-  settingsBtn.className = 'assets-settings-btn';
+  settingsBtn.className = 'assets-settings-btn icon-btn';
   settingsBtn.setAttribute('aria-label', 'Column settings');
-  settingsBtn.innerHTML = '⚙️';
+  settingsBtn.innerHTML = '<img src="/icons/gear.svg" alt="Settings" />';
   header.appendChild(settingsBtn);
 
   container.appendChild(header);

web/src/assets/view.js

@@ -1283,10 +1283,9 @@ export function createExploreView(container, authors, zoomState) {
     svgWrap.appendChild(settingsPanel);
 
     const gearBtn = document.createElement('button');
-    gearBtn.className = 'ae-explore-zoom-btn';
+    gearBtn.className = 'ae-explore-zoom-btn icon-btn';
     gearBtn.title = 'Layout settings';
-    gearBtn.textContent = '⚙';
-    gearBtn.style.fontSize = '14px';
+    gearBtn.innerHTML = '<img src="/icons/gear.svg" alt="Settings" />';
     gearBtn.addEventListener('click', (e) => {
       e.stopPropagation();
       settingsOpen = !settingsOpen;

web/src/contributions/explore.js

@@ -389,9 +389,9 @@ export function createDataView(id, $timeSelection, metadata) {
 
   const gearBtn = document.createElement('button');
   gearBtn.type = 'button';
-  gearBtn.className = 'dv-gear-btn';
+  gearBtn.className = 'dv-gear-btn icon-btn';
   gearBtn.title = 'Plot appearance settings';
-  gearBtn.innerHTML = '⚙'; // ⚙ gear
+  gearBtn.innerHTML = '<img src="/icons/gear.svg" alt="Settings" />';
 
   const removeBtn = document.createElement('button');
   removeBtn.type = 'button';

web/src/explorer/data-view.js

@@ -268,9 +268,9 @@ export function createTimeView($queryFilter) {
 
   const gearBtn = document.createElement('button');
   gearBtn.type = 'button';
-  gearBtn.className = 'dv-gear-btn';
+  gearBtn.className = 'dv-gear-btn icon-btn';
   gearBtn.title = 'Timeline appearance settings';
-  gearBtn.innerHTML = '⚙'; // ⚙
+  gearBtn.innerHTML = '<img src="/icons/gear.svg" alt="Settings" />';
   headerRow.appendChild(gearBtn);
 
   const collapseBtn = document.createElement('button');

web/src/explorer/time-view.js

@@ -47,6 +47,9 @@
 
   /* Shadow */
   --shadow:           0 1px 3px rgba(0, 0, 0, 0.07);
+
+  /* Icons */
+  --icon-filter: brightness(0.2);
 }
 
 /* System dark mode (no explicit override) */
@@ -65,6 +68,7 @@
     --color-dark-blue:  #dddddd;
     --color-light-blue: #aaaaaa;
     --shadow:           0 1px 4px rgba(0, 0, 0, 0.45);
+    --icon-filter: brightness(0.9);
   }
 }
 
@@ -84,6 +88,7 @@
   --color-dark-blue:  #dddddd;
   --color-light-blue: #aaaaaa;
   --shadow:           0 1px 4px rgba(0, 0, 0, 0.45);
+  --icon-filter: brightness(0.9);
 }
 
 /* ---------------------------------------------------------------------------
@@ -323,6 +328,13 @@ body {
   transition: background 0.15s;
 }
 
+.icon-btn img {
+  width: 1.2rem;
+  height: 1.2rem;
+  display: block;
+  filter: var(--icon-filter);
+}
+
 .assets-settings-btn:hover {
   background: var(--surface-card);
 }