Update lock icon for annotation-unavailable message

The image is specified using the `background-image` property since that
makes it easy to use the same relative URL when the app is served from
the extension and when it is served from the site.

h/static/images/icons/lock.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="48px" height="56px" viewBox="0 0 48 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 4 Copy 3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-4-Copy-3" fill="#A6A6A6">
+            <rect id="Rectangle-34" x="0" y="24" width="48" height="32"></rect>
+            <path d="M24,0 C24,0 8,0 8,16 L8,32 L16,32 L16,16.0000004 C16,8 24,8 24,8 C24,8 32,8 32,16 L32,32 L40,32 L40,16 C40,0 24,0 24,0 Z" id="Path-52"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

h/static/styles/thread.scss

@@ -31,7 +31,10 @@ $thread-padding: $annotation-card-left-padding;
   }
 
   &__icon {
-    font-size: 50px;
+    background-image: url(../images/icons/lock.svg);
+    background-repeat: no-repeat;
+    width: 56px;
+    height: 48px;
   }
 }
 

h/templates/client/viewer.html

@@ -23,7 +23,7 @@
   </li>
   <li class="annotation-unavailable-message"
       ng-if="selectedAnnotationUnavailable()">
-    <span class="h-icon-lock annotation-unavailable-message__icon"></span>
+    <div class="annotation-unavailable-message__icon"></div>
     <p class="annotation-unavailable-message__label">
       You do not have permission to see this annotation
     </p>