LP1830912 Locally servered material icons user/berick/lp1830912-local-mat-icons
authorBill Erickson <berickxx@gmail.com>
Wed, 29 May 2019 14:37:27 +0000 (10:37 -0400)
committerBill Erickson <berickxx@gmail.com>
Mon, 29 Jul 2019 15:56:03 +0000 (11:56 -0400)
Adds the material-icons NPM package and teaches the Angular code to
import the icons at build time instead of fetching the icons from the
Google servers.

Two existing icons were swapped with alternate icons to avoid odd
spacing issues with the locally served versions.

Note 'npm install' is required to pick up the new icons package.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/src/eg2/package.json
Open-ILS/src/eg2/src/app/staff/nav.component.html
Open-ILS/src/eg2/src/index.html
Open-ILS/src/eg2/src/styles.css

index 98b5293..45fa93c 100644 (file)
@@ -28,6 +28,7 @@
     "bootstrap-css-only": "^4.2.1",
     "core-js": "^2.6.3",
     "file-saver": "^2.0.0",
+    "material-design-icons": "^3.0.1",
     "ngx-cookie": "^4.1.2",
     "rxjs": "^6.4.0",
     "zone.js": "^0.8.29"
index 8034f41..8e561e8 100644 (file)
             <span i18n>Staff Catalog (Experimental)</span>
           </a>
           <a href="/eg/staff/cat/bucket/record/view" class="dropdown-item">
-            <span class="material-icons">list_alt</span>
+            <span class="material-icons">list</span>
             <span i18n>Record Buckets</span>
           </a>
           <a href="/eg/staff/cat/bucket/copy/view" class="dropdown-item">
-            <span class="material-icons">list_alt</span>
+            <span class="material-icons">list</span>
             <span i18n>Copy Buckets</span>
           </a>
           <div class="dropdown-divider"></div>
             <span i18n>Booking Administration</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/reporter/legacy/main">
-            <span class="material-icons">insert_chart_outlined</span>
+            <span class="material-icons">insert_chart</span>
             <span i18n>Reports</span>
           </a>
         </div>
index f705dba..9ecb4c5 100644 (file)
@@ -6,8 +6,6 @@
   <base href="/eg2">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <!-- see notes in styles.css regarding locally served fonts -->
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <eg-root></eg-root>
index 10424f2..81aa6e3 100644 (file)
@@ -3,16 +3,8 @@
 /* bootstrap CSS only -- JS bits come from ng-bootstrap */
 @import '~bootstrap-css-only/css/bootstrap.min.css';
 
-/* Locally served material icon fonts.
- * Note when I first tested these after installing the fonts
- * via:  npm install --save material-design-icons
- * some of the icons exhibited odd behavior, adding a lot of
- * excess space to the left or right.  It only affected certain
- * icons.  More research needed.
- * /
-/*
-@import '~material-design-icons/iconfont/material-icons.css';
-*/
+/* Locally served material icon fonts  */
+@import '~material-design-icons/iconfont/material-icons.css'; 
 
 /** BS default fonts are huge */
 body, .form-control, .btn, .input-group-text {