Icons to components

docs/developer_guide.md

@@ -352,3 +352,11 @@ the same region.
 ### Testing cloudbuild changes
 
 To test .yaml cloudbuild files, you can use cloud-build-local to dry run the file before actually pushing. Find documentation for how to install and use cloud-build-local [here](https://github.com/GoogleCloudPlatform/cloud-build-local).
+
+### Inline Icons
+
+The Data Commons site makes use of Material Design icons. In certain cases, font-based Material Design icon usage can result in
+flashes of unstyled content that can be avoided by using SVG icons.
+
+We have provided tools to facilitate the creation and use of Material SVG icons in both the Jinja template and in React components. 
+For instructions  on how to generate and use these SVGs and components, please see: [Icon Readme](../tools/resources/README.md):

server/templates/macros/icons.html

@@ -0,0 +1,47 @@
+{#
+Copyright 2024 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+#}
+
+{#
+A macro for inline insertion of svg icons into the templates.
+Inline insertion avoids the potential for flashes the of content
+that can occur with the font version of Material icons.
+
+Parameters:
+
+  name: icon file name.
+  Must match the name of an SVG file (without extension) located in:
+    server/templates/resources/icons.
+  eg. "progress_activity"
+
+Example usage:
+
+{% from 'macros/icons.html' import inline_svg %}
+{{ inline_svg('progress_activity') }}
+
+Adding icons:
+  To add a new icon, copy the SVG into /server/templates/resources/icons.
+  Although icons are not strictly limited to Material UI icons, these are
+  recommended for consistency and cohesiveness. Material icons may be
+  downloaded from: https://fonts.google.com/icons
+
+  The SVG must have a height of "1em", no width and a fill of "currentColor"
+  to allow styling via CSS.
+#}
+
+{% macro inline_svg(name) %}
+{% set svg_path = 'resources/icons/' + name + '.svg' %}
+{% include svg_path %}
+{% endmacro %}

server/templates/place.html

@@ -15,6 +15,8 @@
 #}
 {%- extends BASE_HTML -%}
 
+{% from 'macros/icons.html' import inline_svg %}
+
 {% set main_id = 'dc-places' %}
 {% set page_id = 'page-dc-places' %}
 {% if category == '' %}
@@ -68,10 +70,9 @@ <h3 id="locale" data-lc="{{ locale }}"></h3>
       <div id="subtitle" class="row"></div>
       <div id="place-summary" class="row-col place-summary-container">{{ place_summary }}</div>
       <div id="main-pane" class="row"></div>
-      {# TRANSLATORS: A message shown on the page while the content is loading. #}
-      <div id="page-loading" className="mt-4">
-        {# SVG: Material Icon: Progress Activity, Source: https://fonts.google.com/icons #}
-        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z"/></svg>
+      <div id="page-loading" class="mt-4">
+        {{ inline_svg('progress_activity') }}
+        {# TRANSLATORS: A message shown on the page while the content is loading. #}
         <p>{% trans %}Loading{% endtrans %}</p>
       </div>
     </div>

static/css/core.scss

@@ -266,10 +266,15 @@ section {
           }
         }
         h4 {
+          display: inline-flex;
+          align-items: center;
           font-family: $font-family-google-title;
           font-size: 1rem;
           font-weight: 500;
           margin-bottom: 16px;
+          .icon {
+            font-size: 20px;
+          }
         }
         p,
         .link-item,
@@ -292,8 +297,10 @@ section {
                 text-decoration: underline;
               }
             }
-            .material-icons-outlined {
-              font-size: 18px;
+            .icon {
+              display: flex;
+              align-items: center;
+              font-size: 17px;
             }
           }
         }
@@ -404,16 +411,14 @@ section {
       padding: 0;
       background-color: transparent;
       cursor: pointer;
-      .material-icons-outline {
-        color: #5e5e5e;
+      color: #5e5e5e;
+      font-size: 32px;
+      transform: translateY(1px); // Optical correction
+      @media (max-width: 340px) {
+        font-size: 24px;
       }
-      .big {
-        font-size: 32px;
-        color: #5e5e5e;
-        transform: translateY(1px); // Optical correction
-        @media (max-width: 340px) {
-          font-size: 24px;
-        }
+      &.menu-toggle-close, &.menu-toggle-back {
+        font-size: 24px;
       }
     }
 
@@ -511,6 +516,9 @@ section {
                   border: 0;
                   margin: 0;
                   color: #474747;
+                  .icon {
+                    font-size: 24px;
+                  }
                 }
               }
             }
@@ -561,8 +569,10 @@ section {
                     text-decoration: underline;
                   }
                 }
-                .material-icons-outlined {
-                  font-size: 18px;
+                .icon {
+                  display: flex;
+                  align-items: center;
+                  font-size: 17px;
                 }
               }
             }
@@ -615,6 +625,11 @@ section {
     border: none;
     border-color: var(--gm-3-ref-neutral-neutral-40);
 
+    .search-icon {
+      font-size: 24px;
+      line-height: 1;
+    }
+
     .search-bar-content {
       display: flex;
       flex-wrap: nowrap;
@@ -628,6 +643,9 @@ section {
         display: flex;
         align-items: center;
         color: #f1f1f1;
+        svg {
+          font-size: 24px;
+        }
       }
 
       .search-input-text {

static/css/place/place.scss

@@ -82,6 +82,7 @@ h3 {
   align-items: center;
   gap: 8px;
   svg {
+    font-size: 24px;
     animation: rotating 2s linear infinite;
   }
   p {

static/js/apps/base/components/header_bar/menu_desktop.tsx

@@ -18,6 +18,7 @@
 
 import React, { ReactElement, useEffect, useRef, useState } from "react";
 
+import { KeyboardArrowDown } from "../../../../components/elements/icons/keyboard_arrow_down";
 import {
   GA_EVENT_HEADER_CLICK,
   GA_PARAM_ID,
@@ -138,15 +139,7 @@ const MenuDesktop = ({
                         openMenu === index ? "open" : ""
                       }`}
                     >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        height="24px"
-                        viewBox="0 -960 960 960"
-                        width="24px"
-                        fill="#5f6368"
-                      >
-                        <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
-                      </svg>
+                      <KeyboardArrowDown height={"24px"} color={"#5f6368"} />
                     </span>
                   </button>
                   <div