Fix comment on image discussion icon alignment39608-comment-on-image-discussions-tab-alignment

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/39608

Use SVG icons to avoid having to position things
See https://gitlab.com/gitlab-org/gitlab-ce/issues/39608#note_50088917

1 files changed, 2 insertions, 5 deletions

diff --git a/app/assets/javascripts/image_diff/helpers/badge_helper.js b/app/assets/javascripts/image_diff/helpers/badge_helper.js
index 6a6a668308d..eddaeda9578 100644
--- a/app/assets/javascripts/image_diff/helpers/badge_helper.js
+++ b/app/assets/javascripts/image_diff/helpers/badge_helper.js
@@ -19,12 +19,9 @@ export function addImageBadge(containerEl, { coordinate, badgeText, noteId }) {
 }
 
 export function addImageCommentBadge(containerEl, { coordinate, noteId }) {
-  const buttonEl = createImageBadge(noteId, coordinate, ['image-comment-badge', 'inverted']);
-  const iconEl = document.createElement('i');
-  iconEl.className = 'fa fa-comment-o';
-  iconEl.setAttribute('aria-label', 'comment');
+  const buttonEl = createImageBadge(noteId, coordinate, ['image-comment-badge']);
+  buttonEl.innerHTML = gl.utils.spriteIcon('image-comment-dark');
 
-  buttonEl.appendChild(iconEl);
   containerEl.appendChild(buttonEl);
 }