Enable reading icons from google

vizro-core/schemas/0.1.5.dev0.json

@@ -859,9 +859,132 @@
       "required": ["components", "title"],
       "additionalProperties": false
     },
+    "Accordion": {
+      "title": "Accordion",
+      "description": "Accordion to be used as selector in [`Navigation`][vizro.models.Navigation].\n\nArgs:\n    pages (Dict[str, List[str]]): A dictionary with a page group title as key and a list of page IDs as values.",
+      "type": "object",
+      "properties": {
+        "id": {
+          "title": "Id",
+          "description": "ID to identify model. Must be unique throughout the whole dashboard.When no ID is chosen, ID will be automatically generated.",
+          "type": "string"
+        },
+        "pages": {
+          "title": "Pages",
+          "description": "A dictionary with a page group title as key and a list of page IDs as values.",
+          "type": "object",
+          "additionalProperties": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      },
+      "required": ["pages"],
+      "additionalProperties": false
+    },
+    "NavItem": {
+      "title": "NavItem",
+      "description": "Icon to be used in Navigation Panel of Dashboard.\n\nArgs:\n    tooltip (Optional[str]): Text to be displayed in the tooltip on icon hover.\n    icon (Optional[str]): URI (relative or absolute) of the embeddable content.\n    pages (NavPagesType): See [NavPagesType][vizro.models.types.NavPagesType].",
+      "type": "object",
+      "properties": {
+        "id": {
+          "title": "Id",
+          "description": "ID to identify model. Must be unique throughout the whole dashboard.When no ID is chosen, ID will be automatically generated.",
+          "type": "string"
+        },
+        "tooltip": {
+          "title": "Tooltip",
+          "type": "string"
+        },
+        "icon": {
+          "title": "Icon",
+          "default": "home",
+          "type": "string"
+        },
+        "pages": {
+          "title": "Pages",
+          "description": "List of Page IDs or dict mapping of Page IDs and titles (for hierarchical sub-navigation)",
+          "anyOf": [
+            {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            {
+              "type": "object",
+              "additionalProperties": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                }
+              }
+            }
+          ]
+        },
+        "selector": {
+          "$ref": "#/definitions/Accordion"
+        },
+        "text": {
+          "title": "Text",
+          "default": "",
+          "type": "string"
+        },
+        "max_text_length": {
+          "title": "Max Text Length",
+          "default": 9,
+          "type": "integer"
+        }
+      },
+      "required": ["pages"],
+      "additionalProperties": false
+    },
+    "NavBar": {
+      "title": "NavBar",
+      "description": "Navigation bar to be used as a selector for `Navigation`.\n\nArgs:\n    pages (Optional[NavPagesType]): See [`NavPagesType`][vizro.models.types.NavPagesType].\n        Defaults to `None`.\n    items (List[NavItem]): List of NavItem models. Defaults to `[]`.",
+      "type": "object",
+      "properties": {
+        "id": {
+          "title": "Id",
+          "description": "ID to identify model. Must be unique throughout the whole dashboard.When no ID is chosen, ID will be automatically generated.",
+          "type": "string"
+        },
+        "pages": {
+          "title": "Pages",
+          "anyOf": [
+            {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            {
+              "type": "object",
+              "additionalProperties": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                }
+              }
+            }
+          ]
+        },
+        "items": {
+          "title": "Items",
+          "default": [],
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/NavItem"
+          }
+        }
+      },
+      "additionalProperties": false
+    },
     "Navigation": {
       "title": "Navigation",
-      "description": "Navigation in [`Dashboard`][vizro.models.Dashboard] to structure [`Pages`][vizro.models.Page].\n\nArgs:\n    pages (Optional[NavigationPagesType]): See [`NavigationPagesType`][vizro.models.types.NavigationPagesType].\n        Defaults to `None`.",
+      "description": "Navigation in [`Dashboard`][vizro.models.Dashboard] to structure [`Pages`][vizro.models.Page].\n\nArgs:\n    pages (Optional[NavPagesType]): See [`NavPagesType`][vizro.models.types.NavPagesType].\n        Defaults to `None`.\n    selector (Optional[NavSelectorType]): See [`NavSelectorType`][vizro.models.types.NavSelectorType].\n        Defaults to `None`.)",
       "type": "object",
       "properties": {
         "id": {
@@ -888,6 +1011,17 @@
               }
             }
           ]
+        },
+        "selector": {
+          "title": "Selector",
+          "anyOf": [
+            {
+              "$ref": "#/definitions/Accordion"
+            },
+            {
+              "$ref": "#/definitions/NavBar"
+            }
+          ]
         }
       },
       "additionalProperties": false

vizro-core/src/vizro/models/_dashboard.py

@@ -109,6 +109,7 @@ def build(self):
                 html.Div(id=f"vizro_version_{vizro.__version__}"),
                 ActionLoop._create_app_callbacks(),
                 dash.page_container,
+                html.Link(href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined", rel="stylesheet"),
             ],
             className=self.theme,
             fluid=True,

vizro-core/src/vizro/models/_navigation/nav_bar.py

@@ -4,7 +4,6 @@
 from typing import List, Optional
 
 from dash import html
-from pydantic import validator
 
 from vizro.managers import model_manager
 from vizro.models import VizroBaseModel
@@ -40,7 +39,6 @@ def pre_build(self):
             if isinstance(self.pages, dict):
                 self.items = [NavItem(pages=value) for page, value in self.pages.items()]
 
-
     @_log_call
     def build(self, active_page_id):
         return html.Div(

vizro-core/src/vizro/models/_navigation/nav_item.py

@@ -8,7 +8,6 @@
 from dash import html
 from pydantic import validator
 
-from vizro._constants import STATIC_URL_PREFIX
 from vizro.models import VizroBaseModel
 from vizro.models._models_utils import _log_call
 from vizro.models._navigation._navigation_utils import _validate_pages
@@ -26,7 +25,7 @@ class NavItem(VizroBaseModel):
     """
 
     tooltip: Optional[str]
-    icon: Optional[str]
+    icon: str = "home"
     pages: NavPagesType
     selector: Optional[Accordion] = None
     text: Optional[str] = ""
@@ -41,12 +40,6 @@ def set_selector(cls, selector, values):
             return Accordion(pages=values.get("pages"))
         return selector
 
-    @validator("icon", always=True, pre=True)
-    def set_icon(cls, icon):
-        if icon is None:
-            return STATIC_URL_PREFIX + "/images/icon_1.svg"
-        return icon if icon else None
-
     @_log_call
     def pre_build(self):
         if self.tooltip is None:
@@ -61,12 +54,7 @@ def build(self, active_page_id):
             children=[
                 html.Div(
                     children=[
-                        html.Img(
-                            src=self.icon,
-                            className="nav-icon",
-                        )
-                        if self.icon
-                        else html.Div(className="hidden"),
+                        html.Span(self.icon, className="material-symbols-outlined"),
                         html.Div(
                             children=[self.text],
                             className="icon-text",