pw_web: Get icon fonts via Google Fonts URL

Bug: 332587834 Change-Id: Ie2157073fd68e77ad8b5211265e6ee754a204c48 Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/212871 Lint: Lint 🤖 <[email protected]> Commit-Queue: Luis Flores <[email protected]> Presubmit-Verified: CQ Bot Account <[email protected]> Reviewed-by: Amy Hu <[email protected]>
google · Jun 5, 2024 · 04b802b · 04b802b
1 parent f63576c
commit 04b802b
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 39 deletions.
diff --git a/pw_web/docs.rst b/pw_web/docs.rst
@@ -345,11 +345,11 @@ Material Icon Font (Subsetting)
 -------------------------------
 .. inclusive-language: disable
 
-Log Viewer uses a subset of Material Icons Rounded hosted on `GitHub <https://github.com/google/material-design-icons/blob/master/variablefont/MaterialSymbolsRounded%5BFILL%2CGRAD%2Copsz%2Cwght%5D.woff2>`_
-with codepoints listed in the `codepoints <https://github.com/google/material-design-icons/blob/master/variablefont/MaterialSymbolsRounded%5BFILL%2CGRAD%2Copsz%2Cwght%5D.codepoints>`_ file
+The Log Viewer uses a subset of the Material Symbols Rounded icon font fetched via the `Google Fonts API <https://developers.google.com/fonts/docs/css2#forming_api_urls>`_. However, we also provide a subset of this font for offline usage at `GitHub <https://github.com/google/material-design-icons/blob/master/variablefont/MaterialSymbolsRounded%5BFILL%2CGRAD%2Copsz%2Cwght%5D.woff2>`_
+with codepoints listed in the `codepoints <https://github.com/google/material-design-icons/blob/master/variablefont/MaterialSymbolsRounded%5BFILL%2CGRAD%2Copsz%2Cwght%5D.codepoints>`_ file.
 
 (It's easiest to look up the codepoints at `fonts.google.com <https://fonts.google.com/icons?selected=Material+Symbols+Rounded>`_ e.g. see
-the sidebar shows the Codepoint for `"home" <https://fonts.google.com/icons?selected=Material+Symbols+Rounded:home:FILL@0;wght@0;GRAD@0;opsz@NaN>`_ is e88a)
+the sidebar shows the Codepoint for `"home" <https://fonts.google.com/icons?selected=Material+Symbols+Rounded:home:FILL@0;wght@0;GRAD@0;opsz@NaN>`_ is e88a).
 
 The following icons with codepoints are curently used:
 

diff --git a/pw_web/log-viewer/src/components/log-list/log-list.ts b/pw_web/log-viewer/src/components/log-list/log-list.ts
@@ -551,10 +551,10 @@ export class LogList extends LitElement {
 
     if (field.key == 'severity') {
       const severityIcons = new Map<Severity, string>([
-        [Severity.WARNING, 'warning'],
-        [Severity.ERROR, 'cancel'],
-        [Severity.CRITICAL, 'brightness_alert'],
-        [Severity.DEBUG, 'bug_report'],
+        [Severity.WARNING, '\uf083'],
+        [Severity.ERROR, '\ue888'],
+        [Severity.CRITICAL, '\uf5cf'],
+        [Severity.DEBUG, '\ue868'],
       ]);
 
       const severityValue: Severity = field.value
@@ -624,7 +624,7 @@ export class LogList extends LitElement {
       leading-icon
       data-visible="${this._autoscrollIsEnabled ? 'false' : 'true'}"
     >
-      <md-icon slot="icon" aria-hidden="true">arrow_downward</md-icon>
+      <md-icon slot="icon" aria-hidden="true">&#xe5db;</md-icon>
       Jump to Bottom
     </md-filled-button>
   `;

diff --git a/pw_web/log-viewer/src/components/log-view-controls/log-view-controls.ts b/pw_web/log-viewer/src/components/log-view-controls/log-view-controls.ts
@@ -271,33 +271,21 @@ export class LogViewControls extends LitElement {
       </div>
 
       <div class="actions-container">
-        <span class="action-button" hidden>
-          <md-icon-button>
-            <md-icon>pause_circle</md-icon>
-          </md-icon-button>
-        </span>
-
-        <span class="action-button" hidden>
-          <md-icon-button>
-            <md-icon>wrap_text</md-icon>
-          </md-icon-button>
-        </span>
-
         <span class="action-button" title="Clear logs">
           <md-icon-button @click=${this.handleClearLogsClick}>
-            <md-icon>delete_sweep</md-icon>
+            <md-icon>&#xe16c;</md-icon>
           </md-icon-button>
         </span>
 
         <span class="action-button" title="Toggle line wrapping">
           <md-icon-button @click=${this.handleWrapToggle} toggle>
-            <md-icon>wrap_text</md-icon>
+            <md-icon>&#xe25b;</md-icon>
           </md-icon-button>
         </span>
 
         <span class="action-button field-toggle" title="Toggle columns">
           <md-icon-button @click=${this.toggleColumnVisibilityMenu} toggle>
-            <md-icon>view_column</md-icon>
+            <md-icon>&#xe8ec;</md-icon>
           </md-icon-button>
           <menu class="field-menu" hidden>
             ${this.columnData.map(
@@ -323,7 +311,7 @@ export class LogViewControls extends LitElement {
             @click=${this.toggleMoreActionsMenu}
             class="more-actions-button"
           >
-            <md-icon>more_vert</md-icon>
+            <md-icon>&#xe5d4;</md-icon>
           </md-icon-button>
 
           <md-menu
@@ -341,9 +329,7 @@ export class LogViewControls extends LitElement {
               role="button"
               title="Open a new view to the right of the current view"
             >
-              <md-icon slot="start" data-variant="icon"
-                >splitscreen_right</md-icon
-              >
+              <md-icon slot="start" data-variant="icon">&#xf674;</md-icon>
             </md-menu-item>
 
             <md-menu-item
@@ -352,9 +338,7 @@ export class LogViewControls extends LitElement {
               role="button"
               title="Open a new view below the current view"
             >
-              <md-icon slot="start" data-variant="icon"
-                >splitscreen_bottom</md-icon
-              >
+              <md-icon slot="start" data-variant="icon">&#xf676;</md-icon>
             </md-menu-item>
 
             <md-menu-item
@@ -363,7 +347,7 @@ export class LogViewControls extends LitElement {
               role="button"
               title="Download current logs as a plaintext file"
             >
-              <md-icon slot="start" data-variant="icon">download</md-icon>
+              <md-icon slot="start" data-variant="icon">&#xf090;</md-icon>
             </md-menu-item>
           </md-menu>
         </span>
@@ -380,7 +364,7 @@ export class LogViewControls extends LitElement {
 
         <span class="action-button" hidden>
           <md-icon-button>
-            <md-icon>more_horiz</md-icon>
+            <md-icon>&#xe5d3;</md-icon>
           </md-icon-button>
         </span>
       </div>

diff --git a/pw_web/log-viewer/src/index.css b/pw_web/log-viewer/src/index.css
@@ -16,13 +16,7 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex&family=Roboto+Mono:wght@400;500&display=block');
 
-@font-face {
-    font-family: 'Material Symbols Rounded';
-    font-style: normal;
-    font-display: block;
-    src: url('./pw_web/log-viewer/src/assets/material_symbols_rounded_subset.woff2') format('woff2'),
-    url('./assets/material_symbols_rounded_subset.woff2') format('woff2');
-}
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&text=%EE%97%9B%EF%97%8F%EE%A1%A8%EE%A2%88%EE%97%8D%EE%85%AC%EF%82%90%EE%97%93%EE%97%94%EE%86%A2%EF%99%B6%EF%99%B4%EE%A3%AC%EF%82%83%EE%89%9B&display=block');
 
 :root {
     background-color: #fff;