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

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',
 }];

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,

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',
   });
 }

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 {

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

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

changelogs/unreleased/46733-move-filter-dropdown-from-font-awesome-to-our-own-icons.yml

+---
+title: Updated icons used in filtered search dropdowns
+merge_request: 21694
+author:
+type: changed