Use SVGs from Material Symbols & Icons

to ensure icons load offline.
Remove external links for same.

Author: adityatelange

src/app/components/footer/footer.component.html

@@ -1,11 +1,7 @@
 <nav class="navbar-footer">
-    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20px" height="20px">
-        <path d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 
-                22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 
-                2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 
-                20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 
-                12 4 z M 11 7 L 11 9 L 13 9 L 13 7 L 11 7 z M 11 11 L 11 17 L 13 17 L 
-                13 11 L 11 11 z" />
+    <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="20px" fill="currentColor">
+        <path
+            d="M680-160q8 0 14-6t6-14v-120q0-8-6-14t-14-6q-8 0-14 6t-6 14v120q0 8 6 14t14 6Zm0-200q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6Zm0 280q-83 0-141.5-58.5T480-280q0-83 58.5-141.5T680-480q83 0 141.5 58.5T880-280q0 83-58.5 141.5T680-80ZM520-600h160L480-800l200 200-200-200v160q0 17 11.5 28.5T520-600ZM200-80q-33 0-56.5-23.5T120-160v-640q0-33 23.5-56.5T200-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v13q0 17-13.5 28t-31.5 8q-8-1-17-1.5t-18-.5q-57 0-107.5 21.5T484-480H320q-17 0-28.5 11.5T280-440q0 17 11.5 28.5T320-400h107q-9 19-15 39t-9 41h-83q-17 0-28.5 11.5T280-280q0 17 11.5 28.5T320-240h83q5 29 15 56.5t26 52.5q11 17 2.5 34T420-80H200Z" />
     </svg>
     <span *ngIf="burpVersion">Burp Version: {{ burpVersion }}</span>
     <span *ngIf="exportTime && burpVersion">&nbsp;|&nbsp;</span>

src/app/components/header/header.component.html

@@ -8,23 +8,31 @@
             </g>
         </svg>
         <button mat-icon-button aria-label="info" (click)="infoDialog()" matTooltip="Info">
-            <mat-icon>help</mat-icon>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
+                <path
+                    d="M480-280q17 0 28.5-11.5T520-320v-160q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480v160q0 17 11.5 28.5T480-280Zm0-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" />
+            </svg>
         </button>
         <span class="toolbar-spacer"></span>
         <span>{{ this.selectedFileName }}</span>
         <button mat-icon-button aria-label="Open File" matTooltip="Open File" (click)="fileInput.click()"
             *ngIf="!this.selectedFileName">
-            <mat-icon aria-hidden="false" aria-label="Open File">
-                file_open
-            </mat-icon>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
+                <path
+                    d="M720-320h146q17 0 28.5 11.5T906-280q0 17-11.5 28.5T866-240h-50l90 90q11 11 11 27.5T906-94q-12 12-28.5 12T849-94l-89-89v49q0 17-11.5 28.5T720-94q-17 0-28.5-11.5T680-134v-146q0-17 11.5-28.5T720-320ZM520-800v160q0 17 11.5 28.5T560-600h160L520-800Zm-280-80h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v167q0 17-11.5 28.5T760-400H640q-17 0-28.5 11.5T600-360v240q0 17-11.5 28.5T560-80H240q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880Z" />
+            </svg>
             <input #fileInput type="file" class="hidden" accept="*" (change)="fileChanged($event)" />
         </button>
-        <button mat-icon-button aria-label="Clear selected File" matTooltip="Clear selected File" (click)="fileRemoved()"
-            *ngIf="this.selectedFileName">
+        <button mat-icon-button aria-label="Clear selected File" matTooltip="Clear selected File"
+            (click)="fileRemoved()" *ngIf="this.selectedFileName">
             <mat-icon aria-hidden="false" aria-label="Clear selected File">
-                clear
+                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
+                    fill="currentColor">
+                    <path
+                        d="m480-424 116 116q11 11 28 11t28-11q11-11 11-28t-11-28L536-480l116-116q11-11 11-28t-11-28q-11-11-28-11t-28 11L480-536 364-652q-11-11-28-11t-28 11q-11 11-11 28t11 28l116 116-116 116q-11 11-11 28t11 28q11 11 28 11t28-11l116-116Zm0 344q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" />
+                </svg>
             </mat-icon>
         </button>
     </nav>
 </mat-toolbar>
-<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
+<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>

src/index.html

@@ -34,8 +34,6 @@
   <link rel="icon" href="favicon.ico" sizes="any">
   <link rel="apple-touch-icon" href="assets/apple-touch-icon.png">
   <link rel="manifest" href="manifest.json">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <meta name="theme-color" content="#0a0a0a">
 </head>