Replaced some fork icons instances and fixed the Icon component on the MR Widget

8 files changed, 25 insertions, 12 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index 1f8bd2646ea..38c3ec874c6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -1,6 +1,6 @@
 import tooltip from '../../vue_shared/directives/tooltip';
 import { pluralize } from '../../lib/utils/text_utility';
-import { spriteIcon } from '../../lib/utils/common_utils';
+import Icon from '../../vue_shared/components/icon.vue';
 
 export default {
   name: 'MRWidgetHeader',
@@ -10,6 +10,9 @@ export default {
   directives: {
     tooltip,
   },
+  components: {
+    Icon,
+  },
   computed: {
     shouldShowCommitsBehindText() {
       return this.mr.divergedCommitsCount > 0;
@@ -26,9 +29,6 @@ export default {
         gfm: `\`${this.mr.sourceBranch}\``,
       });
     },
-    downloadIcon() {
-      return spriteIcon('download');
-    },
   },
   methods: {
     isBranchTitleLong(branchTitle) {
@@ -85,9 +85,9 @@ export default {
             data-toggle="dropdown"
             aria-label="Download as"
             role="button">
-            <i
-              v-html="downloadIcon">
-            </i>
+            <icon
+              name="download">
+            </icon>
             <i
               class="fa fa-caret-down"
               aria-hidden="true">
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index e75a35d78ad..373e01931ad 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -723,3 +723,9 @@
     font-size: 16px;
   }
 }
+
+.fork-sprite {
+  width: 12px;
+  height: 12px;
+  margin-right: -5px;
+}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 9805fc4f882..05c1033c5f7 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -143,6 +143,12 @@
       fill: $gl-text-color-secondary;
     }
 
+    .sprite {
+      width: 12px;
+      height: 12px;
+      fill: $gl-text-color;
+    }
+
     .fa {
       font-size: 12px;
       color: $gl-text-color;
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 7777f55ddd7..75cc558c9a4 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -3,7 +3,7 @@
 .file-holder-bottom-radius.file-holder.file.append-bottom-default
   .js-file-title.file-title.clearfix{ data: { current_action: action } }
     .editor-ref
-      = icon('code-fork')
+      = sprite_icon('fork')
       = ref
     %span.editor-file-name
       - if current_action?(:edit) || current_action?(:update)
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 573050e597d..8a8011c27b4 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -8,7 +8,8 @@
 %li{ class: "js-branch-#{branch.name}" }
   %div
     = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated ref-name' do
-      = icon('code-fork', class: 'append-right-5') + "#{branch.name}"
+      = sprite_icon('fork', size: 8)
+      = branch.name
     &nbsp;
     - if branch.name == @repository.root_ref
       %span.label.label-primary default
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index ee7aae0c44b..0cd2d45c74b 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -22,7 +22,7 @@
     - if ref
       - if job.ref
         .icon-container
-          = job.tag? ? icon('tag') : icon('code-fork')
+          = job.tag? ? icon('tag') : sprite_icon('fork', css_class: 'sprite')
         = link_to job.ref, project_ref_path(job.project, job.ref), class: "ref-name"
       - else
         .light none
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 2b5e8711b0a..591da3b6638 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -30,7 +30,7 @@
           %span.project-ref-path
             &nbsp;
             = link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do
-              = icon('code-fork')
+              = sprite_icon('fork', css_class: 'fork-sprite')
               = merge_request.target_branch
         - if merge_request.labels.any?
           &nbsp;
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 003f5fa52eb..63aa4e29ec9 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -52,7 +52,7 @@
             = render_project_pipeline_status(project.pipeline_status)
         - if forks
           %span.prepend-left-10
-            = icon('code-fork')
+            = sprite_icon('fork')
             = number_with_delimiter(project.forks_count)
         - if stars
           %span.prepend-left-10