Use the 'refresh' icon in the apply update button in the top bar

Use the <svg-icon> component to render a refresh icon in the top bar and
adjust the styling to center the icon and pending update count
vertically.

h/static/styles/top-bar.scss

@@ -68,8 +68,13 @@
 
 // Button which indicates that other users have made or edited annotations
 // on the current page and applies them when clicked
+//
+// The button displays a 'refresh' icon and an update count, both of which
+// should be vertically centered within the icon.
 .top-bar__apply-update-btn {
-  display: inline-block;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   flex-shrink: 0;
   margin-right: 5px;
 
@@ -85,6 +90,12 @@
   user-select: none;
 }
 
+.top-bar__apply-icon {
+  display: inline-block;
+  line-height: 12px;
+  margin-right: 5px;
+}
+
 .top-bar__dropdown-arrow {
   color: $color-dove-gray;
 }

h/templates/client/top_bar.html

@@ -16,7 +16,8 @@
        h-tooltip
        tooltip-direction="up"
        aria-label="View {{pendingUpdateCount}} updates">
-       <i class="h-icon-feed"></i> {{pendingUpdateCount}}
+       <svg-icon class="top-bar__apply-icon" name="'refresh'"></svg-icon>
+       {{pendingUpdateCount}}
     </a>
     <login-control
       auth="auth"
@@ -40,7 +41,8 @@
        h-tooltip
        tooltip-direction="up"
        aria-label="View {{pendingUpdateCount}} updates">
-       <i class="h-icon-feed"></i> {{pendingUpdateCount}}
+       <svg-icon class="top-bar__apply-icon" name="'refresh'"></svg-icon>
+       {{pendingUpdateCount}}
     </a>
     <search-input
       class="search-input"