Update `highlight` icon to use SVG

src/sidebar/components/annotation-header.js

@@ -4,6 +4,7 @@ const { createElement } = require('preact');
 const AnnotationDocumentInfo = require('./annotation-document-info');
 const AnnotationShareInfo = require('./annotation-share-info');
 const AnnotationUser = require('./annotation-user');
+const SvgIcon = require('./svg-icon');
 const Timestamp = require('./timestamp');
 
 /**
@@ -62,9 +63,11 @@ function AnnotationHeader({
         <AnnotationShareInfo annotation={annotation} isPrivate={isPrivate} />
         {!isEditing && isHighlight && (
           <div className="annotation-header__highlight">
-            <i
-              className="h-icon-border-color"
+            <SvgIcon
+              name="highlight"
               title="This is a highlight. Click 'edit' to add a note or tag."
+              inline={true}
+              className="annotation-header__highlight-icon"
             />
           </div>
         )}

src/styles/sidebar/components/annotation-header.scss

@@ -37,4 +37,11 @@
   &__highlight {
     margin-right: 5px;
   }
+
+  &__highlight-icon {
+    width: 12px;
+    height: 12px;
+    /* bring down the baseline a little */
+    margin-bottom: -1px;
+  }
 }