feat: replace material icons with symbols (#487)

BREAKING CHANGE: applications using the titanium-icon-picker must now use the new material symbols font.
LeavittSoftware · Oct 6, 2023 · a7285b5 · a7285b5
1 parent 8629dce
commit a7285b5
Show file tree

Hide file tree

Showing 5 changed files with 3,304 additions and 2,204 deletions.
diff --git a/packages/leavittbook/index.html b/packages/leavittbook/index.html
@@ -40,6 +40,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" defer async rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined&display=block" defer async rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@400" rel="stylesheet" />
 
     <script>
       //do not set ClaimScopes on sites with the manage side menu

diff --git a/packages/leavittbook/src/demos/titanium-icon-picker/index.html b/packages/leavittbook/src/demos/titanium-icon-picker/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <head>
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined&display=block" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@400" rel="stylesheet" />
   <style>
     body {
       font-family: Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -26,7 +26,7 @@
       --mdc-theme-secondary: var(--app-secondary-color);
       --mdc-text-field-outlined-idle-border-color: var(--app-border-color);
       --mdc-select-outlined-idle-border-color: var(--app-border-color);
-      --mdc-icon-font: 'Material Icons Outlined';
+      --mdc-icon-font: 'Material Symbols Outlined';
     }
 
     @font-face {

diff --git a/packages/leavittbook/src/demos/titanium-icon-picker/titanium-icon-picker-playground.ts b/packages/leavittbook/src/demos/titanium-icon-picker/titanium-icon-picker-playground.ts
@@ -20,7 +20,7 @@ export class TitaniumIconPickerPlayground extends LitElement {
       :host {
         display: flex;
         flex-direction: column;
-        --mdc-icon-font: 'Material Icons Outlined';
+        --mdc-icon-font: 'Material Symbols Outlined';
         margin: 24px 12px;
       }