fix performance

angular.json

@@ -167,6 +167,123 @@
           }
         }
       }
+    },
+    "example-prod": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/example",
+      "sourceRoot": "projects/example/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "aot": true,
+            "outputPath": "dist/example",
+            "index": "projects/example/src/index.html",
+            "main": "projects/example/src/main.ts",
+            "polyfills": "projects/example/src/polyfills.ts",
+            "tsConfig": "projects/example/tsconfig.app.json",
+            "allowedCommonJsDependencies": ["uswds"],
+            "assets": [
+              "projects/example/src/favicon.ico",
+              {
+                "glob": "**/*",
+                "input": "projects/nshmp-template/src/assets",
+                "output": "./assets/"
+              }
+            ],
+            "styles": ["projects/nshmp-template/src/scss/styles.scss"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/example/src/environments/environment.ts",
+                  "with": "projects/example/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "example:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "example:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/example/src/test.ts",
+            "polyfills": "projects/example/src/polyfills.ts",
+            "tsConfig": "projects/example/tsconfig.spec.json",
+            "karmaConfig": "projects/example/karma.conf.js",
+            "styles": ["projects/nshmp-template/src/scss/styles.scss"],
+            "scripts": [],
+            "assets": ["projects/example/src/favicon.ico", "projects/example/src/assets"]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/example/tsconfig.app.json",
+              "projects/example/tsconfig.spec.json",
+              "projects/example/e2e/tsconfig.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "projects/example/e2e/protractor.conf.js",
+            "devServerTarget": "example:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "example:serve:production"
+            }
+          }
+        }
+      }
     }
   },
   "defaultProject": "nshmp-template",

package-lock.json

@@ -2800,6 +2800,35 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/angular-fontawesome": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.7.0.tgz",
+      "integrity": "sha512-U+eHYbKuVYrrm9SnIfl+z+6KTiI4Pu+S2OKh34JIi7C1jHhDcrVeDZISP/cpswHY7LWWDOPYeKE+yuWFlL4aVw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.30",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz",
+      "integrity": "sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.30",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.30.tgz",
+      "integrity": "sha512-E3sAXATKCSVnT17HYmZjjbcmwihrNOCkoU7dVMlasrcwiJAHxSKeZ+4WN5O+ElgO/FaYgJmASl8p9N7/B/RttA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.30"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.14.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.14.0.tgz",
+      "integrity": "sha512-WsqPFTvJFI7MYkcy0jeFE2zY+blC4OrnB9MJOcn1NxRXT/sSfEEhrI7CwzIkiYajLiVDBKWeErYOvpsMeodmCQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.30"
+      }
+    },
     "@istanbuljs/schema": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
@@ -3819,6 +3848,12 @@
       "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
       "dev": true
     },
+    "acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true
+    },
     "adjust-sourcemap-loader": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz",
@@ -4424,6 +4459,12 @@
       "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
       "dev": true
     },
+    "basic-auth": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.1.0.tgz",
+      "integrity": "sha1-RSIe5Cn37h5QNb4/UVM/HN/SmIQ=",
+      "dev": true
+    },
     "batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -4448,6 +4489,18 @@
         "callsite": "1.0.0"
       }
     },
+    "bfj": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.2.tgz",
+      "integrity": "sha512-BmBJa4Lip6BPRINSZ0BPEIfB1wUY/9rwbwvIHQA1KjX9om29B6id0wnWXq7m3bn5JrUVjeOTnVuhPT1FiHwPGw==",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.5.5",
+        "check-types": "^8.0.3",
+        "hoopy": "^0.1.4",
+        "tryer": "^1.0.1"
+      }
+    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -5108,6 +5161,12 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "check-types": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
+      "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
+      "dev": true
+    },
     "chokidar": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
@@ -5913,6 +5972,12 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "corser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+      "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=",
+      "dev": true
+    },
     "cosmiconfig": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
@@ -6826,6 +6891,12 @@
         }
       }
     },
+    "duplexer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
+      "dev": true
+    },
     "duplexer3": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
@@ -6854,12 +6925,30 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "ecstatic": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-3.3.2.tgz",
+      "integrity": "sha512-fLf9l1hnwrHI2xn9mEDT7KIi22UDqA2jaCwyCbSUJh9a1V+LEUSL/JO/6TIz/QyuBURWUHrFL5Kg2TtO1bkkog==",
+      "dev": true,
+      "requires": {
+        "he": "^1.1.1",
+        "mime": "^1.6.0",
+        "minimist": "^1.1.0",
+        "url-join": "^2.0.5"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
       "dev": true
     },
+    "ejs": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.7.4.tgz",
+      "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
+      "dev": true
+    },
     "electron-to-chromium": {
       "version": "1.3.498",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.498.tgz",
@@ -7656,6 +7745,12 @@
       "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
       "dev": true
     },
+    "filesize": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
+      "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==",
+      "dev": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -8215,6 +8310,16 @@
         "lodash": "^4.17.15"
       }
     },
+    "gzip-size": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
+      "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.1",
+        "pify": "^4.0.1"
+      }
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -8403,6 +8508,12 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
     "hex-color-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@@ -8420,6 +8531,12 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoopy": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
+      "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==",
+      "dev": true
+    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -8656,6 +8773,32 @@
         }
       }
     },
+    "http-server": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/http-server/-/http-server-0.12.3.tgz",
+      "integrity": "sha512-be0dKG6pni92bRjq0kvExtj/NrrAd28/8fCXkaI/4piTwQMSDSLMhWyW0NI1V+DBI3aa1HMlQu46/HjVLfmugA==",
+      "dev": true,
+      "requires": {
+        "basic-auth": "^1.0.3",
+        "colors": "^1.4.0",
+        "corser": "^2.0.1",
+        "ecstatic": "^3.3.2",
+        "http-proxy": "^1.18.0",
+        "minimist": "^1.2.5",
+        "opener": "^1.5.1",
+        "portfinder": "^1.0.25",
+        "secure-compare": "3.0.1",
+        "union": "~0.5.0"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        }
+      }
+    },
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -11617,6 +11760,12 @@
       "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
       "dev": true
     },
+    "opener": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.1.tgz",
+      "integrity": "sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==",
+      "dev": true
+    },
     "opn": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
@@ -14237,6 +14386,12 @@
         }
       }
     },
+    "secure-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+      "integrity": "sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=",
+      "dev": true
+    },
     "secure-keys": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/secure-keys/-/secure-keys-1.0.0.tgz",
@@ -16473,6 +16628,12 @@
       "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
       "dev": true
     },
+    "tryer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
+      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
+      "dev": true
+    },
     "ts-node": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-7.0.1.tgz",
@@ -16725,6 +16886,15 @@
       "integrity": "sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw==",
       "dev": true
     },
+    "union": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+      "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+      "dev": true,
+      "requires": {
+        "qs": "^6.4.0"
+      }
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -17014,6 +17184,12 @@
         }
       }
     },
+    "url-join": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.5.tgz",
+      "integrity": "sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=",
+      "dev": true
+    },
     "url-parse": {
       "version": "1.4.7",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
@@ -17753,6 +17929,35 @@
         }
       }
     },
+    "webpack-bundle-analyzer": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.8.0.tgz",
+      "integrity": "sha512-PODQhAYVEourCcOuU+NiYI7WdR8QyELZGgPvB1y2tjbUpbmcQOt5Q7jEK+ttd5se0KSBKD9SXHCEozS++Wllmw==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1",
+        "bfj": "^6.1.1",
+        "chalk": "^2.4.1",
+        "commander": "^2.18.0",
+        "ejs": "^2.6.1",
+        "express": "^4.16.3",
+        "filesize": "^3.6.1",
+        "gzip-size": "^5.0.0",
+        "lodash": "^4.17.15",
+        "mkdirp": "^0.5.1",
+        "opener": "^1.5.1",
+        "ws": "^6.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz",
+          "integrity": "sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==",
+          "dev": true
+        }
+      }
+    },
     "webpack-dev-middleware": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz",

package.json

@@ -4,12 +4,17 @@
   "scripts": {
     "ng": "ng",
     "npm-cli-login": "npm-cli-login",
-    "start:example": "ng serve example",
+    "start": "ng serve example",
+    "start:prod": "http-server -a localhost -p 4200 -c-1 dist/example/",
+    "analyze": "webpack-bundle-analyzer dist/example/stats.json",
     "build": "./build.sh",
+    "build:example:stats": "npm run build:example:prod -- --stats-json",
     "build:example": "ng build example",
+    "build:example:prod": "ng build example-prod --prod --aot --build-optimizer",
     "test": "ng test nshmp-template",
     "test:example": "ng test example",
-    "lint": "ng lint nshmp-template",
+    "lint": "ng lint",
+    "lint:fix": "npm run lint -- --fix",
     "lint:example": "ng lint example",
     "e2e": "ng e2e nshmp-template",
     "e2e:example": "ng e2e example",
@@ -28,6 +33,9 @@
     "@angular/platform-browser": "~10.0.4",
     "@angular/platform-browser-dynamic": "~10.0.4",
     "@angular/router": "~10.0.4",
+    "@fortawesome/angular-fontawesome": "^0.7.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "uswds": "^2.8.0",
@@ -43,6 +51,7 @@
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
+    "http-server": "^0.12.3",
     "husky": "^4.2.5",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.0",
@@ -60,7 +69,8 @@
     "tslint": "~6.1.0",
     "tslint-etc": "^1.12.0",
     "tsutils": "^3.17.1",
-    "typescript": "~3.9.6"
+    "typescript": "~3.9.6",
+    "webpack-bundle-analyzer": "^3.8.0"
   },
   "husky": {
     "hooks": {

projects/nshmp-template/src/assets/icon-dot-gov.svg

+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>icon-dot-gov</title><path fill="#2378C3" fill-rule="evenodd" d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0zm0 1.208C14.994 1.208 1.208 14.994 1.208 32S14.994 62.792 32 62.792 62.792 49.006 62.792 32 49.006 1.208 32 1.208zm10.59 38.858a.857.857 0 0 1 .882.822v1.642H18.886v-1.642a.857.857 0 0 1 .882-.822H42.59zM25.443 27.774v9.829h1.642v-9.83h3.273v9.83H32v-9.83h3.272v9.83h1.643v-9.83h3.272v9.83h.76a.857.857 0 0 1 .882.821v.821h-21.3v-.809a.857.857 0 0 1 .88-.82h.762v-9.842h3.272zm5.736-8.188l12.293 4.915v1.642h-1.63a.857.857 0 0 1-.882.822H21.41a.857.857 0 0 1-.882-.822h-1.642v-1.642l12.293-4.915z"/></svg>
\ No newline at end of file

projects/nshmp-template/src/assets/icon-https.svg

+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>icon-https</title><path fill="#719F2A" fill-rule="evenodd" d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0zm0 1.208C14.994 1.208 1.208 14.994 1.208 32S14.994 62.792 32 62.792 62.792 49.006 62.792 32 49.006 1.208 32 1.208zm0 18.886a7.245 7.245 0 0 1 7.245 7.245v3.103h.52c.86 0 1.557.698 1.557 1.558v9.322c0 .86-.697 1.558-1.557 1.558h-15.53c-.86 0-1.557-.697-1.557-1.558V32c0-.86.697-1.558 1.557-1.558h.52V27.34A7.245 7.245 0 0 1 32 20.094zm0 3.103a4.142 4.142 0 0 0-4.142 4.142v3.103h8.284V27.34A4.142 4.142 0 0 0 32 23.197z"/></svg>
\ No newline at end of file

projects/nshmp-template/src/lib/components/footer-bottom-navbar/footer-bottom-navbar.component.html

@@ -30,7 +30,7 @@
             [href]="link.href"
             target="_blank"
           >
-            <i class="fab fa-lg {{ link.iconClass }}"></i>
+            <fa-icon [icon]="link.iconClass" size="2x"></fa-icon>
           </a>
         </li>
       </ul>

projects/nshmp-template/src/lib/components/footer-bottom-navbar/footer-bottom-navbar.component.ts

 import { BreakpointObserver } from '@angular/cdk/layout';
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  faFacebook,
+  faFacebookSquare,
+  faFlickr,
+  faInstagram,
+  faTwitterSquare,
+  faYoutube
+} from '@fortawesome/free-brands-svg-icons';
 import { Subscription } from 'rxjs';
 
 import { FooterLink } from '../../models/footer-link.model';
@@ -44,32 +52,32 @@ export class FooterBottomNavbarComponent implements OnInit, OnDestroy {
 
   socialLinks: FooterSocialLink[] = [
     {
-      iconClass: 'fa-twitter-square',
+      iconClass: faTwitterSquare,
       href: 'https://twitter.com/usgs',
       tooltipText: 'USGS Twitter'
     },
     {
-      iconClass: 'fa-facebook-square',
+      iconClass: faFacebookSquare,
       href: 'https://facebook.com/usgeologicalsurvey',
       tooltipText: 'USGS Facebook'
     },
     {
-      iconClass: 'fa-github',
+      iconClass: faFacebook,
       href: 'https://github.com/usgs',
       tooltipText: 'USGS GitHub'
     },
     {
-      iconClass: 'fa-flickr',
+      iconClass: faFlickr,
       href: 'https://flickr.com/usgeologicalsurvey',
       tooltipText: 'USGS Flickr'
     },
     {
-      iconClass: 'fa-youtube',
+      iconClass: faYoutube,
       href: 'http://youtube.com/usgs',
       tooltipText: 'USGS YouTube'
     },
     {
-      iconClass: 'fa-instagram',
+      iconClass: faInstagram,
       href: 'https://instagram.com/usgs',
       tooltipText: 'USGS Instagram'
     }

projects/nshmp-template/src/lib/components/gov-banner-content/gov-banner-content.component.html

@@ -5,7 +5,7 @@
     <div class="usa-banner__guidance-gov tablet:grid-col-6">
       <img
         class="usa-banner__icon usa-media__block-img"
-        src="~uswds/dist/img/icon-dot-gov.svg"
+        src="assets/icon-dot-gov.svg"
         alt="Dot gov"
       />
       <div class="usa-media__block-body">
@@ -20,11 +20,7 @@
 
     <!-- Right side of banner -->
     <div class="usa-banner__guidance-ssl tablet:grid-col-6">
-      <img
-        class="usa-banner__icon usa-media__block-img"
-        src="~uswds/dist/img/icon-https.svg"
-        alt="Https"
-      />
+      <img class="usa-banner__icon usa-media__block-img" src="assets/icon-https.svg" alt="Https" />
       <div class="usa-media__block-body">
         <p>
           <strong>The site is secure.</strong>

projects/nshmp-template/src/lib/components/gov-banner-header/gov-banner-header.component.html

@@ -3,7 +3,7 @@
   <div class="usa-accordion__heading">
     <button class="usa-accordion__button" aria-expanded="false" aria-controls="gov-banner">
       <div class="grid-col-10 tablet:grid-col-auto">
-        <img class="usa-flag" src="~uswds/dist/img/us_flag_small.png" alt="U.S. flag" />
+        <img class="usa-flag" src="assets/us_flag_small.png" alt="U.S. flag" />
         An official website of the United States government. Here's how you know.
       </div>
     </button>

projects/nshmp-template/src/lib/components/gov-banner/gov-banner.component.ts

 import { Component, OnInit } from '@angular/core';
+import 'uswds';
 
 @Component({
   selector: 'nshmp-template-gov-banner',

projects/nshmp-template/src/lib/models/footer-social-link.model.ts

+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
 /**
  * Interface for social links on the footer.
  */
 export interface FooterSocialLink {
   /** The social link font awesome class */
-  iconClass: string;
+  iconClass: IconDefinition;
 
   /** Tooltip text */
   tooltipText: string;

projects/nshmp-template/src/lib/modules/material.module.ts

 import { NgModule } from '@angular/core';
-
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -8,7 +7,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import 'uswds';
 
 @NgModule({
   exports: [

projects/nshmp-template/src/lib/modules/nshmp-layout.module.ts

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { FooterBottomNavbarComponent } from '../components/footer-bottom-navbar/footer-bottom-navbar.component';
 import { FooterTopNavbarComponent } from '../components/footer-top-navbar/footer-top-navbar.component';
@@ -16,7 +17,7 @@ import { SearchBarComponent } from '../components/search-bar/search-bar.componen
 import { MaterialModule } from './material.module';
 
 @NgModule({
-  imports: [CommonModule, MaterialModule, RouterModule.forChild([])],
+  imports: [CommonModule, MaterialModule, FontAwesomeModule, RouterModule.forChild([])],
   declarations: [
     NshmpTemplateComponent,
     FooterBottomNavbarComponent,

projects/nshmp-template/src/scss/_material-theme.scss

@@ -6,9 +6,7 @@
 @import '~@angular/material/theming';
 
 /* Import Google material icons */
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-
-@import url('https://use.fontawesome.com/releases/v5.7.1/css/all.css');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons&display=swap');
 
 /*
   Include the common styles for Angular Material. We include this here so that you only
@@ -23,35 +21,35 @@
   Generated from http://mcg.mbitson.com.
 */
 $usa-primary-darker: (
-  50 : #e4e9f0,
-  100 : #bac7d9,
-  200 : #8da2c0,
-  300 : #5f7ca6,
-  400 : #3c6093,
-  500 : #1a4480,
-  600 : #173e78,
-  700 : #13356d,
-  800 : #0f2d63,
-  900 : #081f50,
-  A100 : #85a4ff,
-  A200 : #527eff,
-  A400 : #1f58ff,
-  A700 : #0546ff,
+  50: #e4e9f0,
+  100: #bac7d9,
+  200: #8da2c0,
+  300: #5f7ca6,
+  400: #3c6093,
+  500: #1a4480,
+  600: #173e78,
+  700: #13356d,
+  800: #0f2d63,
+  900: #081f50,
+  A100: #85a4ff,
+  A200: #527eff,
+  A400: #1f58ff,
+  A700: #0546ff,
   contrast: (
-    50 : #000000,
-    100 : #000000,
-    200 : #000000,
-    300 : #ffffff,
-    400 : #ffffff,
-    500 : #ffffff,
-    600 : #ffffff,
-    700 : #ffffff,
-    800 : #ffffff,
-    900 : #ffffff,
-    A100 : #000000,
-    A200 : #ffffff,
-    A400 : #ffffff,
-    A700 : #ffffff,
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #ffffff,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #ffffff,
+    A400: #ffffff,
+    A700: #ffffff
   )
 );
 
@@ -67,10 +65,7 @@ $nshmp-accent: mat-palette($mat-grey, A200, A200, A400);
 $nshmp-warn: mat-palette($mat-red);
 
 /* Create the theme object (a Sass map containing all of the palettes). */
-$nshmp-theme: mat-light-theme(
-  $nshmp-primary,
-  $nshmp-accent,
-  $nshmp-warn);
+$nshmp-theme: mat-light-theme($nshmp-primary, $nshmp-accent, $nshmp-warn);
 
 /*
   Include theme styles for core and each component used in your app.

projects/nshmp-template/src/scss/_uswds-theme.scss

@@ -3,6 +3,7 @@
 $theme-font-path: '~uswds/dist/fonts';
 $theme-image-path: '~uswds/dist/img';
 $theme-show-notifications: false;
+$theme-hero-image: '/assets/usgs-logo.svg';
 
 $theme-utility-breakpoints: (
   'card': false,
@@ -26,9 +27,3 @@ $theme-utility-breakpoints: (
 );
 
 @import '~uswds/dist/scss/uswds.scss';
-@import '~uswds/dist/scss/theme/uswds-theme-general';
-@import '~uswds/dist/scss/theme/uswds-theme-typography';
-@import '~uswds/dist/scss/theme/uswds-theme-spacing';
-@import '~uswds/dist/scss/theme/uswds-theme-color';
-@import '~uswds/dist/scss/theme/uswds-theme-utilities';
-@import '~uswds/dist/scss/theme/uswds-theme-components';