awardEmoji: Display custom emoji

In one of the previous commits it's made possible to award custom emoji.
With this change they are properly shown on the frontend.

Changelog: added

app/assets/javascripts/emoji/index.js

@@ -245,5 +245,12 @@ export function glEmojiTag(inputName, options) {
     ? `data-fallback-sprite-class="${escape(fallbackSpriteClass)}" `
     : '';
 
-  return `<gl-emoji ${fallbackSpriteAttribute}data-name="${escape(name)}"></gl-emoji>`;
+  const fallbackUrl = opts.url;
+  const fallbackSrcAttribute = fallbackUrl
+    ? `data-fallback-src="${fallbackUrl}" data-unicode-version="custom"`
+    : '';
+
+  return `<gl-emoji ${fallbackSrcAttribute}${fallbackSpriteAttribute}data-name="${escape(
+    name,
+  )}"></gl-emoji>`;
 }

app/assets/javascripts/vue_shared/components/awards_list.vue

@@ -93,12 +93,14 @@ export default {
       return awardList.some((award) => award.user.id === this.currentUserId);
     },
     createAwardList(name, list) {
+      const url = list.length ? list[0].url : null;
+
       return {
         name,
         list,
         title: this.getAwardListTitle(list, name),
         classes: this.getAwardClassBindings(list),
-        html: glEmojiTag(name),
+        html: glEmojiTag(name, { url }),
       };
     },
     getAwardListTitle(awardsList, name) {

app/assets/stylesheets/framework/awards.scss

@@ -244,9 +244,13 @@
 // above will be deprecated once all instances of "award emoji" are
 // migrated to Vue.
 
-.gl-button .award-emoji-block gl-emoji {
-  margin-top: -1px;
-  margin-bottom: -1px;
+.gl-button .award-emoji-block {
+  display: contents;
+
+  gl-emoji {
+    margin-top: -1px;
+    margin-bottom: -1px;
+  }
 }
 
 .add-reaction-button {

app/assets/stylesheets/framework/common.scss

@@ -254,10 +254,9 @@ li.note {
 }
 
 img.emoji {
-  height: 20px;
+  height: 16px;
   vertical-align: top;
   width: 20px;
-  margin-top: 1px;
 }
 
 .chart {