diff --git a/package.json b/package.json
index 2107aa70..aed21f49 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "mygovbc-bootstrap-theme": "0.4.1",
     "ng2-bootstrap-modal": "1.0.1",
     "ngx-pagination": "3.2.1",
+    "ng-inline-svg": "8.5.1",
     "rxjs": "6.5.2",
     "web-animations-js": "2.3.1",
     "xlsx": "0.14.3",
diff --git a/src/app/applications/application-detail/application-detail.component.html b/src/app/applications/application-detail/application-detail.component.html
index 62180555..5b0f00a4 100644
--- a/src/app/applications/application-detail/application-detail.component.html
+++ b/src/app/applications/application-detail/application-detail.component.html
@@ -36,8 +36,7 @@ <h1>Crown land File: {{application.clFile}}</h1>
         <button class="btn btn-icon" title="Refresh this application with the latest data from Tantalis"
           (click)="refreshApplication()"
           [disabled]="isRefreshing">
-          <i class="material-icons" [ngClass]="{'rotating': isRefreshing}">
-            refresh
+          <i class="material-icons refresh-spinner" [ngClass]="{'rotating': isRefreshing}" [inlineSVG]="'assets/images/baseline-refresh-24px.svg'">
           </i>
         </button>
         <span class="vert-pipe">&nbsp;</span>
diff --git a/src/app/applications/application-detail/application-detail.component.scss b/src/app/applications/application-detail/application-detail.component.scss
index 8918d9ff..6f443632 100644
--- a/src/app/applications/application-detail/application-detail.component.scss
+++ b/src/app/applications/application-detail/application-detail.component.scss
@@ -174,3 +174,30 @@ ngb-alert {
   left: 50%;
   margin-left: -6rem;
 }
+
+// This, plus the use of the inlineSVG directive, is all because IE renders material icons poorly (IE renders the
+// icons asymmetrically, so spinners rotate super wonky).  This entire chunk of scss and the inlineSVG directive
+// could be replaced with the regular use of material icons if IE rendered the icons correctly. See other material-icon
+// <i> tags for examples.
+.btn {
+  &:hover .refresh-spinner > ::ng-deep svg {
+    fill: #212529;
+  }
+
+  .refresh-spinner {
+    height: 24px;
+    width: 24px;
+    -webkit-transition: background-color 0.15s ease-in-out;
+    -moz-transition: background-color 0.15s ease-in-out;
+    -ms-transition: background-color 0.15s ease-in-out;
+    -o-transition: background-color 0.15s ease-in-out;
+    transition: background-color 0.15s ease-in-out;
+
+    // Because the element is loaded dynamically, we need to use ng-deep to force the css to apply
+    > ::ng-deep svg {
+      display: block;
+      margin: auto;
+      fill: #808080;
+    }
+  }
+}
diff --git a/src/app/applications/applications.module.ts b/src/app/applications/applications.module.ts
index 56d07273..3de17db5 100644
--- a/src/app/applications/applications.module.ts
+++ b/src/app/applications/applications.module.ts
@@ -6,6 +6,7 @@ import { SharedModule } from 'app/shared.module';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { ApplicationsRoutingModule } from './applications-routing.module';
+import { InlineSVGModule } from 'ng-inline-svg';
 
 // components
 import { ApplicationListComponent } from './application-list/application-list.component';
@@ -27,6 +28,7 @@ import { ExcelService } from 'app/services/excel.service';
     SharedModule,
     NgxPaginationModule,
     NgbModule.forRoot(),
+    InlineSVGModule.forRoot(),
     ApplicationsRoutingModule
   ],
   declarations: [
diff --git a/src/app/utils/token-interceptor.ts b/src/app/utils/token-interceptor.ts
index 494b9666..a884ee04 100644
--- a/src/app/utils/token-interceptor.ts
+++ b/src/app/utils/token-interceptor.ts
@@ -1,7 +1,7 @@
 import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { KeycloakService } from 'app/services/keycloak.service';
-import { Observable, Subject } from 'rxjs';
+import { Observable, Subject, throwError } from 'rxjs';
 import { catchError, switchMap, tap } from 'rxjs/operators';
 
 /**
@@ -42,11 +42,11 @@ export class TokenInterceptor implements HttpInterceptor {
               return next.handle(request);
             }),
             catchError(err => {
-              return Observable.throw(err);
+              return throwError(err);
             })
           );
         }
-        return Observable.throw(error);
+        return throwError(error);
       })
     );
   }
diff --git a/src/assets/images/baseline-refresh-24px.svg b/src/assets/images/baseline-refresh-24px.svg
new file mode 100644
index 00000000..f1ad30d2
--- /dev/null
+++ b/src/assets/images/baseline-refresh-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file