Fix CSS that uses old `.ic-` classes

- Remove unused styles in related_items_list
- Use utils / classes for other icons

app/assets/javascripts/boards/components/modal/lists_dropdown.vue

@@ -29,7 +29,7 @@ export default {
   <div class="dropdown inline">
     <button class="dropdown-menu-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
       <span :style="{ backgroundColor: selected.label.color }" class="dropdown-label-box"> </span>
-      {{ selected.title }} <icon name="chevron-down" />
+      {{ selected.title }} <icon name="chevron-down" class="dropdown-menu-toggle-icon" />
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
       <ul>

app/assets/javascripts/boards/components/project_select.vue

@@ -105,7 +105,7 @@ export default {
         data-toggle="dropdown"
         aria-expanded="false"
       >
-        {{ selectedProjectName }} <icon name="chevron-down" />
+        {{ selectedProjectName }} <icon name="chevron-down" class="dropdown-menu-toggle-icon" />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
         <div class="dropdown-title">{{ __('Projects') }}</div>

app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue

@@ -73,7 +73,7 @@ export default {
 </script>
 <template>
   <div ref="milestoneDetails" class="issue-milestone-details">
-    <icon :size="16" class="inline icon" name="clock" />
+    <icon :size="16" class="gl-mr-2" name="clock" />
     <span class="milestone-title d-inline-block">{{ milestone.title }}</span>
     <gl-tooltip :target="() => $refs.milestoneDetails" placement="bottom" class="js-item-milestone">
       <span class="bold">{{ __('Milestone') }}</span> <br />

app/assets/stylesheets/components/related_items_list.scss

@@ -123,21 +123,11 @@ $item-remove-button-space: 42px;
   .item-milestone {
     text-decoration: none;
     max-width: $item-milestone-max-width;
-
-    .ic-clock {
-      margin-right: $gl-padding-4;
-    }
   }
 
   .item-weight {
     max-width: $item-weight-max-width;
   }
-
-  .item-milestone .ic-clock,
-  .item-weight .ic-weight,
-  .item-due-date .ic-calendar {
-    color: $gl-text-color-secondary;
-  }
 }
 
 .item-assignees {

app/assets/stylesheets/framework/dropdowns.scss

@@ -164,9 +164,8 @@
     right: 8px;
   }
 
-  .ic-chevron-down {
+  .dropdown-menu-toggle-icon {
     position: absolute;
-    top: $gl-padding-8;
     right: $gl-padding-8;
     color: $gray-darkest;
   }
@@ -627,7 +626,7 @@
 
   .fa,
   .input-icon,
-  .ic-search {
+  .dropdown-input-search {
     position: absolute;
     top: $gl-padding-8;
     right: 20px;

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/dropdown_button.vue

@@ -34,6 +34,6 @@ export default {
     data-toggle="dropdown"
   >
     <span class="dropdown-toggle-text" :class="toggleTextClass">{{ buttonText }}</span>
-    <icon name="chevron-down" />
+    <icon name="chevron-down" class="dropdown-menu-toggle-icon" />
   </button>
 </template>