Resolve "Move filter dropdown from Font Awesome to our own icons"

6 files changed, 13 insertions, 12 deletions

diff --git a/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js
index 1f9c3f41e52..b4588cc1318 100644
--- a/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js
+++ b/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js
@@ -5,7 +5,7 @@ const tokenKeys = [{
   type: 'string',
   param: 'status',
   symbol: '',
-  icon: 'signal',
+  icon: 'messages',
   tag: 'status',
 }];
 
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 184b34b7b5e..8aecf9725e6 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -62,7 +62,7 @@ export default class DropdownHint extends FilteredSearchDropdown {
   renderContent() {
     const dropdownData = this.tokenKeys.get()
       .map(tokenKey => ({
-        icon: `fa-${tokenKey.icon}`,
+        icon: `${gon.sprite_icons}#${tokenKey.icon}`,
         hint: tokenKey.key,
         tag: `:${tokenKey.tag}`,
         type: tokenKey.type,
diff --git a/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js
index 6c9499864c5..cc7291c9f59 100644
--- a/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js
+++ b/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js
@@ -19,14 +19,14 @@ export const tokenKeys = [{
   type: 'string',
   param: 'title',
   symbol: '%',
-  icon: 'clock-o',
+  icon: 'clock',
   tag: '%milestone',
 }, {
   key: 'label',
   type: 'array',
   param: 'name[]',
   symbol: '~',
-  icon: 'tag',
+  icon: 'labels',
   tag: '~label',
 }];
 
@@ -37,7 +37,7 @@ if (gon.current_user_id) {
     type: 'string',
     param: 'emoji',
     symbol: '',
-    icon: 'thumbs-up',
+    icon: 'thumb-up',
     tag: 'emoji',
   });
 }
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index e9b074236cc..d5693a5d1a1 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -389,9 +389,8 @@
   .btn {
     text-overflow: ellipsis;
 
-    .fa {
-      width: 15px;
-      line-height: $line-height-base;
+    svg {
+      margin-right: $gl-padding-8;
     }
 
     .dropdown-label-box {
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index 4dc076c95c5..07333d63f2c 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -69,7 +69,7 @@
               %ul{ data: { dropdown: true } }
                 %li.filter-dropdown-item{ data: { action: 'submit' } }
                   = button_tag class: %w[btn btn-link] do
-                    = icon('search')
+                    = sprite_icon('search')
                     %span
                       = _('Press Enter or click to search')
               %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
@@ -77,7 +77,8 @@
                   = button_tag class: %w[btn btn-link] do
                     -# Encapsulate static class name `{{icon}}` inside #{} to bypass
                     -# haml lint's ClassAttributeWithStaticValue
-                    %i.fa{ class: "#{'{{icon}}'}" }
+                    %svg
+                      %use{ 'xlink:href': "#{'{{icon}}'}" }
                     %span.js-filter-hint
                       {{hint}}
                     %span.js-filter-tag.dropdown-light-content
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 9ce7f6fe269..659e03fd67d 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -34,7 +34,7 @@
               %ul{ data: { dropdown: true } }
                 %li.filter-dropdown-item{ data: { action: 'submit' } }
                   %button.btn.btn-link
-                    = icon('search')
+                    = sprite_icon('search')
                     %span
                       Press Enter or click to search
               %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
@@ -42,7 +42,8 @@
                   %button.btn.btn-link
                     -# Encapsulate static class name `{{icon}}` inside #{} to bypass
                     -# haml lint's ClassAttributeWithStaticValue
-                    %i.fa{ class: "#{'{{icon}}'}" }
+                    %svg
+                      %use{ 'xlink:href': "#{'{{icon}}'}" }
                     %span.js-filter-hint
                       {{hint}}
                     %span.js-filter-tag.dropdown-light-content