From e28a1491d4b83a3bb8921deef13cf78af0537f73 Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Mon, 1 Aug 2022 14:44:02 +0800
Subject: [PATCH] EE-3499 update UI endpoint/settings (#7385)

---
 .../configs-datatable/configsDatatable.html   | 12 ++--
 .../secrets-datatable/secretsDatatable.html   | 12 ++--
 .../actions/servicesDatatableActions.html     |  6 +-
 .../services-datatable/servicesDatatable.html | 28 ++++----
 .../endpointsDatatable.html                   | 14 ++--
 .../groups-datatable/groupsDatatable.html     | 65 ++++++++++---------
 .../tags-datatable/tagsDatatable.html         | 43 ++++++------
 app/portainer/views/groups/groups.html        |  9 +--
 app/portainer/views/tags/tags.html            | 10 +--
 .../form-components/InputList/InputList.tsx   |  4 +-
 10 files changed, 98 insertions(+), 105 deletions(-)

diff --git a/app/docker/components/datatables/configs-datatable/configsDatatable.html b/app/docker/components/datatables/configs-datatable/configsDatatable.html
index 69b7aa4d3..aea6cdc19 100644
--- a/app/docker/components/datatables/configs-datatable/configsDatatable.html
+++ b/app/docker/components/datatables/configs-datatable/configsDatatable.html
@@ -88,22 +88,22 @@
                 </span>
                 <a ng-click="$ctrl.changeOrderBy('Name')">
                   Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
               <th>
                 <a ng-click="$ctrl.changeOrderBy('CreatedAt')">
                   Creation Date
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
               <th>
                 <a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
                   Ownership
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
             </tr>
diff --git a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
index b478f2935..466edbe6c 100644
--- a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
+++ b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
@@ -88,22 +88,22 @@
                 </span>
                 <a ng-click="$ctrl.changeOrderBy('Name')">
                   Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
               <th>
                 <a ng-click="$ctrl.changeOrderBy('CreatedAt')">
                   Creation Date
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
               <th>
                 <a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
                   Ownership
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
             </tr>
diff --git a/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html b/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html
index b0caabd49..0ce250690 100644
--- a/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html
+++ b/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html
@@ -1,9 +1,9 @@
-<div class="actionBar" authorization="DockerServiceUpdate, DockerServiceDelete, DockerServiceCreate">
+<div class="actionBar !gap-3" authorization="DockerServiceUpdate, DockerServiceDelete, DockerServiceCreate">
   <div class="btn-group" role="group" aria-label="...">
     <button
       ng-if="$ctrl.showUpdateAction"
       type="button"
-      class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+      class="btn btn-sm btn-primary h-fit"
       authorization="DockerServiceUpdate"
       ng-disabled="$ctrl.selectedItemCount === 0"
       ng-click="$ctrl.updateAction($ctrl.selectedItems)"
@@ -13,7 +13,7 @@
     </button>
     <button
       type="button"
-      class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+      class="btn btn-sm btn-dangerlight h-fit"
       authorization="DockerServiceDelete"
       ng-disabled="$ctrl.selectedItemCount === 0"
       ng-click="$ctrl.removeAction($ctrl.selectedItems)"
diff --git a/app/docker/components/datatables/services-datatable/servicesDatatable.html b/app/docker/components/datatables/services-datatable/servicesDatatable.html
index c62ba2568..d190d84d3 100644
--- a/app/docker/components/datatables/services-datatable/servicesDatatable.html
+++ b/app/docker/components/datatables/services-datatable/servicesDatatable.html
@@ -80,50 +80,50 @@
               <th>
                 <a ng-click="$ctrl.changeOrderBy('Name')">
                   Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
               <th ng-if="$ctrl.showStackColumn">
                 <a ng-click="$ctrl.changeOrderBy('StackName')">
                   Stack
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
               <th ng-show="$ctrl.columnVisibility.columns.image.display">
                 <a ng-click="$ctrl.changeOrderBy('Image')">
                   Image
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Image' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
               <th>
                 <a ng-click="$ctrl.changeOrderBy('Mode')">
                   Scheduling Mode
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Mode' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Mode' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Mode' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Mode' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
               <th ng-show="$ctrl.columnVisibility.columns.ports.display">
                 <a ng-click="$ctrl.changeOrderBy('Ports')">
                   Published Ports
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Ports' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Ports' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Ports' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Ports' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
               <th ng-show="$ctrl.columnVisibility.columns.updated.display">
                 <a ng-click="$ctrl.changeOrderBy('UpdatedAt')">
                   Last Update
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'UpdatedAt' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'UpdatedAt' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'UpdatedAt' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'UpdatedAt' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
               <th ng-show="$ctrl.columnVisibility.columns.ownership.display">
                 <a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
                   Ownership
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
             </tr>
diff --git a/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html b/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
index 73c5ae7a6..d2a80137d 100644
--- a/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
+++ b/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
@@ -19,10 +19,10 @@
             data-cy="endpoint-searchInput"
           />
         </div>
-        <div class="actionBar">
+        <div class="actionBar !gap-3">
           <button
             type="button"
-            class="btn btn-sm btn-dangerlight vertical-center"
+            class="btn btn-sm btn-dangerlight h-fit"
             ng-disabled="$ctrl.state.selectedItemCount === 0"
             ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
             data-cy="endpoint-removeEndpointButton"
@@ -30,13 +30,7 @@
             <pr-icon icon="'trash-2'" feather="true" class-name="'icon-white'"></pr-icon>
             <span>Remove</span>
           </button>
-          <button
-            type="button"
-            class="btn btn-sm btn-primary vertical-center"
-            ng-click="$ctrl.setReferrer()"
-            ui-sref="portainer.wizard.endpoints"
-            data-cy="endpoint-addEndpointButton"
-          >
+          <button type="button" class="btn btn-sm btn-primary h-fit" ng-click="$ctrl.setReferrer()" ui-sref="portainer.wizard.endpoints" data-cy="endpoint-addEndpointButton">
             <pr-icon icon="'plus'" feather="true" class-name="'icon-white'"></pr-icon>
             <span>Add environment</span>
           </button>
@@ -136,7 +130,7 @@
       <div class="footer" ng-if="!$ctrl.state.loading">
         <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/portainer/components/datatables/groups-datatable/groupsDatatable.html b/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
index 41c8ac47c..2546efff1 100644
--- a/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
+++ b/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
@@ -2,34 +2,37 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
-      </div>
-      <div class="actionBar">
-        <button
-          type="button"
-          class="btn btn-sm btn-danger"
-          ng-disabled="$ctrl.state.selectedItemCount === 0"
-          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-          data-cy="endpointGroup-removeGroupButton"
-        >
-          <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
-        </button>
-        <button type="button" class="btn btn-sm btn-primary" ui-sref="portainer.groups.new" data-cy="endpointGroup-addGroupButton">
-          <i class="fa fa-plus space-right" aria-hidden="true"></i>Add group
-        </button>
-      </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-          data-cy="endpointGroup-searchInput"
-        />
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
+        <div class="searchBar">
+          <pr-icon icon="'search'" feather="true"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search for a group..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+            data-cy="endpointGroup-searchInput"
+          />
+        </div>
+        <div class="actionBar !gap-3">
+          <button
+            type="button"
+            class="btn btn-sm btn-dangerlight h-fit"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+            data-cy="endpointGroup-removeGroupButton"
+          >
+            <pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
+          </button>
+          <button type="button" class="btn btn-sm btn-primary h-fit" ui-sref="portainer.groups.new" data-cy="endpointGroup-addGroupButton">
+            <pr-icon icon="'plus'" feather="true"></pr-icon>Add group
+          </button>
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells" data-cy="endpointGroup-endpointGroupTable">
@@ -42,8 +45,8 @@
                 </span>
                 <a ng-click="$ctrl.changeOrderBy('Name')">
                   Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
               <th>Actions</th>
@@ -77,7 +80,7 @@
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/portainer/components/datatables/tags-datatable/tagsDatatable.html b/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
index db232d9c9..c0cc75483 100644
--- a/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
+++ b/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
@@ -2,23 +2,26 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
-      </div>
-      <div class="actionBar">
-        <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
-          <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
-        </button>
-      </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          ng-model-options="{ debounce: 300 }"
-        />
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
+        <div class="searchBar">
+          <pr-icon icon="'search'" feather="true"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search for a tag..."
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
+        <div class="actionBar !gap-3">
+          <button type="button" class="btn btn-sm btn-dangerlight h-fit" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+            <pr-icon icon="'trash-2'" feather="true"></pr-icon>Remove
+          </button>
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
@@ -31,8 +34,8 @@
                 </span>
                 <a ng-click="$ctrl.changeOrderBy('Name')">
                   Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
+                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon>
+                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon>
                 </a>
               </th>
             </tr>
@@ -62,7 +65,7 @@
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/portainer/views/groups/groups.html b/app/portainer/views/groups/groups.html
index 6a85d6c11..1c4491e0e 100644
--- a/app/portainer/views/groups/groups.html
+++ b/app/portainer/views/groups/groups.html
@@ -2,13 +2,6 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <groups-datatable
-      title-text="Environment groups"
-      title-icon="fa-object-group"
-      dataset="groups"
-      table-key="groups"
-      order-by="Name"
-      remove-action="removeAction"
-    ></groups-datatable>
+    <groups-datatable title-text="Environment groups" title-icon="grid" dataset="groups" table-key="groups" order-by="Name" remove-action="removeAction"></groups-datatable>
   </div>
 </div>
diff --git a/app/portainer/views/tags/tags.html b/app/portainer/views/tags/tags.html
index a59e3a55c..95883af35 100644
--- a/app/portainer/views/tags/tags.html
+++ b/app/portainer/views/tags/tags.html
@@ -3,7 +3,7 @@
 <div class="row">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-plus" title-text="Add a new tag"> </rd-widget-header>
+      <rd-widget-header icon="plus" feather-icon="true" title-text="Add a new tag"> </rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal" name="tagCreationForm" ng-submit="createTag()">
           <!-- name-input -->
@@ -25,8 +25,8 @@
           <div class="form-group" ng-show="tagCreationForm.name.$invalid">
             <div class="col-sm-12 small text-warning">
               <div ng-messages="tagCreationForm.name.$error">
-                <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
-                <p ng-message="validName"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This tag already exists.</p>
+                <p ng-message="required"><pr-icon icon="'alert-triangle'" feather="true"></pr-icon> This field is required.</p>
+                <p ng-message="validName"><pr-icon icon="'alert-triangle'" feather="true"></pr-icon> This tag already exists.</p>
               </div>
             </div>
           </div>
@@ -40,7 +40,7 @@
                 ng-click="createTag()"
                 button-spinner="state.actionInProgress"
               >
-                <span ng-hide="state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Create tag</span>
+                <span ng-hide="state.actionInProgress"><pr-icon icon="'plus'" feather="true"></pr-icon> Create tag</span>
                 <span ng-show="state.actionInProgress">Creating tag...</span>
               </button>
             </div>
@@ -53,6 +53,6 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <tags-datatable title-text="Tags" title-icon="fa-tags" dataset="tags" table-key="tags" order-by="Name" remove-action="removeAction"></tags-datatable>
+    <tags-datatable title-text="Tags" title-icon="tag" dataset="tags" table-key="tags" order-by="Name" remove-action="removeAction"></tags-datatable>
   </div>
 </div>
diff --git a/app/react/components/form-components/InputList/InputList.tsx b/app/react/components/form-components/InputList/InputList.tsx
index 246b6af64..d34f1ee68 100644
--- a/app/react/components/form-components/InputList/InputList.tsx
+++ b/app/react/components/form-components/InputList/InputList.tsx
@@ -147,11 +147,11 @@ export function InputList<T = DefaultType>({
                 {!readOnly && (
                   <Button
                     color="danger"
-                    size="small"
+                    size="medium"
                     onClick={() => handleRemoveItem(key, item)}
                     disabled={disabled}
                   >
-                    <i className="fa fa-trash" aria-hidden="true" />
+                    <Icon icon="trash-2" feather />
                   </Button>
                 )}
               </div>