From 43600083a7d9fb5bca7b084ba09890eab027c35a Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Tue, 19 Jul 2022 11:29:50 +0800
Subject: [PATCH] EE-3723 update headers to feather icon (#7275)

---
 .../dashboardClusterAgentInfo.html                     |  2 +-
 .../datatables/configs-datatable/configsDatatable.html |  5 ++++-
 .../containerNetworksDatatable.html                    |  4 +---
 .../datatables/events-datatable/eventsDatatable.html   |  4 +---
 .../datatables/images-datatable/imagesDatatable.html   |  5 ++++-
 .../networks-datatable/networksDatatable.html          |  5 ++++-
 .../datatables/nodes-datatable/nodesDatatable.html     |  5 ++++-
 .../datatables/secrets-datatable/secretsDatatable.html |  5 ++++-
 .../services-datatable/servicesDatatable.html          |  5 ++++-
 .../datatables/tasks-datatable/tasksDatatable.html     |  4 +---
 .../datatables/volumes-datatable/volumesDatatable.html |  5 ++++-
 .../host-view-panels/devices-panel/devices-panel.html  |  2 +-
 .../host-view-panels/disks-panel/disks-panel.html      |  2 +-
 .../engine-details-panel/engine-details-panel.html     |  2 +-
 .../host-details-panel/host-details-panel.html         |  2 +-
 .../swarm-node-details-panel.html                      |  2 +-
 app/docker/views/configs/configs.html                  |  2 +-
 app/docker/views/configs/edit/config.html              |  4 ++--
 app/docker/views/containers/edit/container.html        | 10 +++++-----
 app/docker/views/dashboard/dashboard.html              |  2 +-
 app/docker/views/events/events.html                    |  2 +-
 app/docker/views/images/edit/image.html                | 10 +++++-----
 app/docker/views/images/images.html                    |  4 ++--
 app/docker/views/networks/networks.html                |  2 +-
 app/docker/views/secrets/edit/secret.html              |  2 +-
 app/docker/views/secrets/secrets.html                  |  2 +-
 app/docker/views/services/edit/includes/configs.html   |  2 +-
 .../views/services/edit/includes/constraints.html      |  2 +-
 .../views/services/edit/includes/container-specs.html  |  2 +-
 .../views/services/edit/includes/containerlabels.html  |  2 +-
 .../services/edit/includes/environmentvariables.html   |  2 +-
 app/docker/views/services/edit/includes/hosts.html     |  2 +-
 app/docker/views/services/edit/includes/image.html     |  2 +-
 app/docker/views/services/edit/includes/logging.html   |  2 +-
 app/docker/views/services/edit/includes/mounts.html    |  2 +-
 app/docker/views/services/edit/includes/networks.html  |  2 +-
 .../services/edit/includes/placementPreferences.html   |  2 +-
 app/docker/views/services/edit/includes/ports.html     |  2 +-
 app/docker/views/services/edit/includes/resources.html |  2 +-
 app/docker/views/services/edit/includes/restart.html   |  2 +-
 app/docker/views/services/edit/includes/secrets.html   |  2 +-
 .../views/services/edit/includes/servicelabels.html    |  2 +-
 app/docker/views/services/edit/includes/tasks.html     |  2 +-
 .../views/services/edit/includes/updateconfig.html     |  2 +-
 app/docker/views/services/edit/service.html            |  2 +-
 app/docker/views/services/services.html                |  2 +-
 app/docker/views/swarm/swarm.html                      |  6 +++---
 app/docker/views/swarm/visualizer/swarmvisualizer.html |  4 ++--
 app/docker/views/volumes/edit/volume.html              |  2 +-
 app/docker/views/volumes/volumes.html                  |  2 +-
 .../custom-templates-list/customTemplatesList.html     |  4 +---
 .../registries-datatable/registriesDatatable.html      |  4 +---
 .../components/template-list/templateList.html         |  4 +---
 .../custom-templates-view/customTemplatesView.html     |  2 +-
 .../views/endpoint-registries/registries.html          |  2 +-
 app/portainer/views/registries/registries.html         |  2 +-
 app/portainer/views/stacks/edit/stack.html             |  2 +-
 app/portainer/views/templates/templates.html           |  2 +-
 app/react/components/Widget/WidgetTitle.tsx            |  6 +++++-
 app/react/components/datatables/TableTitle.tsx         |  6 +++++-
 .../ContainersDatatable/ContainersDatatable.tsx        |  2 +-
 61 files changed, 103 insertions(+), 86 deletions(-)

diff --git a/app/docker/components/dashboard-cluster-agent-info/dashboardClusterAgentInfo.html b/app/docker/components/dashboard-cluster-agent-info/dashboardClusterAgentInfo.html
index 8d8cafc34..734f8e487 100644
--- a/app/docker/components/dashboard-cluster-agent-info/dashboardClusterAgentInfo.html
+++ b/app/docker/components/dashboard-cluster-agent-info/dashboardClusterAgentInfo.html
@@ -10,7 +10,7 @@
         <tr>
           <td colspan="2">
             <div class="btn-group" role="group" aria-label="...">
-              <a ui-sref="docker.swarm.visualizer"><i class="fa fa-object-group space-right" aria-hidden="true"></i>Go to cluster visualizer</a>
+              <a ui-sref="docker.swarm.visualizer" class="vertical-center"><pr-icon icon="'trello'" feather="true" class-name="'icon'"></pr-icon>Go to cluster visualizer</a>
             </div>
           </td>
         </tr>
diff --git a/app/docker/components/datatables/configs-datatable/configsDatatable.html b/app/docker/components/datatables/configs-datatable/configsDatatable.html
index 8a319ecd4..e0d3b3994 100644
--- a/app/docker/components/datatables/configs-datatable/configsDatatable.html
+++ b/app/docker/components/datatables/configs-datatable/configsDatatable.html
@@ -2,7 +2,10 @@
   <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 class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
             <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
diff --git a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
index d60bf5467..487357115 100644
--- a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
+++ b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
@@ -1,9 +1,7 @@
 <div class="datatable">
   <rd-widget>
+    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
     <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">
         <form class="form-horizontal">
           <div class="row" authorization="DockerNetworkConnect">
diff --git a/app/docker/components/datatables/events-datatable/eventsDatatable.html b/app/docker/components/datatables/events-datatable/eventsDatatable.html
index bf298e7ad..5c22fe1e1 100644
--- a/app/docker/components/datatables/events-datatable/eventsDatatable.html
+++ b/app/docker/components/datatables/events-datatable/eventsDatatable.html
@@ -1,9 +1,7 @@
 <div class="datatable">
   <rd-widget>
+    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
     <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="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
         <input
diff --git a/app/docker/components/datatables/images-datatable/imagesDatatable.html b/app/docker/components/datatables/images-datatable/imagesDatatable.html
index c89004521..2924cc424 100644
--- a/app/docker/components/datatables/images-datatable/imagesDatatable.html
+++ b/app/docker/components/datatables/images-datatable/imagesDatatable.html
@@ -2,7 +2,10 @@
   <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 class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
             <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
diff --git a/app/docker/components/datatables/networks-datatable/networksDatatable.html b/app/docker/components/datatables/networks-datatable/networksDatatable.html
index 6af7331b8..18a4a0c40 100644
--- a/app/docker/components/datatables/networks-datatable/networksDatatable.html
+++ b/app/docker/components/datatables/networks-datatable/networksDatatable.html
@@ -2,7 +2,10 @@
   <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 class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
             <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
diff --git a/app/docker/components/datatables/nodes-datatable/nodesDatatable.html b/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
index 408cad837..a9b73a35c 100644
--- a/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
+++ b/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
@@ -2,7 +2,10 @@
   <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 class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
             <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
diff --git a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
index e7411757e..16df6c36c 100644
--- a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
+++ b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
@@ -2,7 +2,10 @@
   <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 class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
             <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
diff --git a/app/docker/components/datatables/services-datatable/servicesDatatable.html b/app/docker/components/datatables/services-datatable/servicesDatatable.html
index f7ee9c969..4632106ee 100644
--- a/app/docker/components/datatables/services-datatable/servicesDatatable.html
+++ b/app/docker/components/datatables/services-datatable/servicesDatatable.html
@@ -2,7 +2,10 @@
   <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 class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
         <div class="settings">
           <datatable-columns-visibility columns="$ctrl.columnVisibility.columns" on-change="($ctrl.onColumnVisibilityChange)"></datatable-columns-visibility>
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
diff --git a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
index 3a5364c76..9ea33b571 100644
--- a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
+++ b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
@@ -1,9 +1,7 @@
 <div class="datatable">
   <rd-widget>
+    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
     <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="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
         <input
diff --git a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
index ae75d2ea5..f999b3276 100644
--- a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
+++ b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
@@ -2,7 +2,10 @@
   <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 class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
             <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
diff --git a/app/docker/components/host-view-panels/devices-panel/devices-panel.html b/app/docker/components/host-view-panels/devices-panel/devices-panel.html
index 2fb821d7c..f0154ae08 100644
--- a/app/docker/components/host-view-panels/devices-panel/devices-panel.html
+++ b/app/docker/components/host-view-panels/devices-panel/devices-panel.html
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-code" title-text="PCI Devices"></rd-widget-header>
+      <rd-widget-header icon="code" feather-icon="true" title-text="PCI Devices"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <thead>
diff --git a/app/docker/components/host-view-panels/disks-panel/disks-panel.html b/app/docker/components/host-view-panels/disks-panel/disks-panel.html
index ef5fb9022..441782dab 100644
--- a/app/docker/components/host-view-panels/disks-panel/disks-panel.html
+++ b/app/docker/components/host-view-panels/disks-panel/disks-panel.html
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-code" title-text="Physical Disks"></rd-widget-header>
+      <rd-widget-header icon="code" feather-icon="true" title-text="Physical Disks"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <thead>
diff --git a/app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.html b/app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.html
index 5b25d0ea2..0ce6b96a2 100644
--- a/app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.html
+++ b/app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.html
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-code" title-text="Engine Details"></rd-widget-header>
+      <rd-widget-header icon="code" feather-icon="true" title-text="Engine Details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
diff --git a/app/docker/components/host-view-panels/host-details-panel/host-details-panel.html b/app/docker/components/host-view-panels/host-details-panel/host-details-panel.html
index 11681b915..cf7d2ac3e 100644
--- a/app/docker/components/host-view-panels/host-details-panel/host-details-panel.html
+++ b/app/docker/components/host-view-panels/host-details-panel/host-details-panel.html
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-code" title-text="Host Details"></rd-widget-header>
+      <rd-widget-header icon="code" feather-icon="true" title-text="Host Details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
diff --git a/app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.html b/app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.html
index c0ab66bde..53fbe4501 100644
--- a/app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.html
+++ b/app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.html
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-code" title-text="Node Details"></rd-widget-header>
+      <rd-widget-header icon="code" feather-icon="true" title-text="Node Details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
diff --git a/app/docker/views/configs/configs.html b/app/docker/views/configs/configs.html
index 08c35393d..0f64783d6 100644
--- a/app/docker/views/configs/configs.html
+++ b/app/docker/views/configs/configs.html
@@ -4,7 +4,7 @@
   <div class="col-sm-12">
     <configs-datatable
       title-text="Configs"
-      title-icon="fa-file-code"
+      title-icon="clipboard"
       dataset="ctrl.configs"
       table-key="configs"
       order-by="Name"
diff --git a/app/docker/views/configs/edit/config.html b/app/docker/views/configs/edit/config.html
index aee38813e..e4d822568 100644
--- a/app/docker/views/configs/edit/config.html
+++ b/app/docker/views/configs/edit/config.html
@@ -3,7 +3,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-file-code" title-text="Config details"></rd-widget-header>
+      <rd-widget-header icon="clipboard" feather-icon="true" title-text="Config details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
@@ -63,7 +63,7 @@
 <div class="row" ng-if="config">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-file-code" title-text="Config content"></rd-widget-header>
+      <rd-widget-header icon="code" feather-icon="true" title-text="Config content"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
           <div class="form-group">
diff --git a/app/docker/views/containers/edit/container.html b/app/docker/views/containers/edit/container.html
index a7906360d..1f20c2b64 100644
--- a/app/docker/views/containers/edit/container.html
+++ b/app/docker/views/containers/edit/container.html
@@ -60,7 +60,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-server" title-text="Container status"></rd-widget-header>
+      <rd-widget-header icon="box" feather-icon="true" title-text="Container status"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
@@ -197,7 +197,7 @@
 <div class="row" authorization="DockerImageCreate">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-clone" title-text="Create image"></rd-widget-header>
+      <rd-widget-header icon="list" feather-icon="true" title-text="Create image"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
           <!-- tag-description -->
@@ -249,7 +249,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-server" title-text="Container details"></rd-widget-header>
+      <rd-widget-header icon="list" feather-icon="true" title-text="Container details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table container-details-table">
           <tbody>
@@ -336,7 +336,7 @@
 <div class="row" ng-if="container.Mounts.length > 0">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-hdd" title-text="Volumes"></rd-widget-header>
+      <rd-widget-header icon="database" feather-icon="true" title-text="Volumes"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <thead>
@@ -365,7 +365,7 @@
     <container-networks-datatable
       ng-if="container.NetworkSettings.Networks"
       title-text="Connected networks"
-      title-icon="fa-sitemap"
+      title-icon="share-2"
       dataset="container.NetworkSettings.Networks"
       table-key="container-networks"
       container="container"
diff --git a/app/docker/views/dashboard/dashboard.html b/app/docker/views/dashboard/dashboard.html
index a8d6ab8a6..e925c0328 100644
--- a/app/docker/views/dashboard/dashboard.html
+++ b/app/docker/views/dashboard/dashboard.html
@@ -64,7 +64,7 @@
               <tr ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
                 <td colspan="2">
                   <div class="btn-group" role="group" aria-label="...">
-                    <a ui-sref="docker.swarm.visualizer"><i class="fa fa-object-group space-right" aria-hidden="true"></i>Go to cluster visualizer</a>
+                    <a ui-sref="docker.swarm.visualizer" class="vertical-center"><pr-icon icon="'trello'" feather="true" class-name="'icon'"></pr-icon>Go to cluster visualizer</a>
                   </div>
                 </td>
               </tr>
diff --git a/app/docker/views/events/events.html b/app/docker/views/events/events.html
index c50a6cf16..0c0f4094b 100644
--- a/app/docker/views/events/events.html
+++ b/app/docker/views/events/events.html
@@ -2,6 +2,6 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <events-datatable title-text="Events" title-icon="fa-history" dataset="events" table-key="events" order-by="Time" reverse-order="true"></events-datatable>
+    <events-datatable title-text="Events" title-icon="clock" dataset="events" table-key="events" order-by="Time" reverse-order="true"></events-datatable>
   </div>
 </div>
diff --git a/app/docker/views/images/edit/image.html b/app/docker/views/images/edit/image.html
index 83eb13e78..2efb8c8f2 100644
--- a/app/docker/views/images/edit/image.html
+++ b/app/docker/views/images/edit/image.html
@@ -3,7 +3,7 @@
 <div class="row" ng-if="image.RepoTags.length > 0">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa fa-tags" title-text="Image tags"></rd-widget-header>
+      <rd-widget-header icon="tag" feather-icon="true" title-text="Image tags"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
           <div class="form-group">
@@ -54,7 +54,7 @@
 <div class="row" authorization="DockerImageCreate">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-tag" title-text="Tag the image"></rd-widget-header>
+      <rd-widget-header icon="tag" feather-icon="true" title-text="Tag the image"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
           <!-- image-and-registry -->
@@ -89,7 +89,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-clone" title-text="Image details"></rd-widget-header>
+      <rd-widget-header icon="list" feather-icon="true" title-text="Image details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
@@ -156,7 +156,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-clone" title-text="Dockerfile details"></rd-widget-header>
+      <rd-widget-header icon="list" feather-icon="true" title-text="Dockerfile details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
@@ -208,7 +208,7 @@
 <div class="row" ng-if="history.length > 0">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-clone" title-text="Image layers"></rd-widget-header>
+      <rd-widget-header icon="list" feather-icon="true" title-text="Image layers"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table id="image-layers" class="table">
           <thead>
diff --git a/app/docker/views/images/images.html b/app/docker/views/images/images.html
index d68164714..715eb444d 100644
--- a/app/docker/views/images/images.html
+++ b/app/docker/views/images/images.html
@@ -3,7 +3,7 @@
 <div class="row" ng-if="!offlineMode" authorization="DockerImageCreate">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-download" title-text="Pull image "> </rd-widget-header>
+      <rd-widget-header icon="download" feather-icon="true" title-text="Pull image "> </rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
           <!-- image-and-registry -->
@@ -49,7 +49,7 @@
   <div class="col-sm-12">
     <images-datatable
       title-text="Images"
-      title-icon="fa-clone"
+      title-icon="list"
       dataset="images"
       table-key="images"
       order-by="RepoTags"
diff --git a/app/docker/views/networks/networks.html b/app/docker/views/networks/networks.html
index 057718822..e0c2f9c3f 100644
--- a/app/docker/views/networks/networks.html
+++ b/app/docker/views/networks/networks.html
@@ -5,7 +5,7 @@
   <div class="col-sm-12">
     <networks-datatable
       title-text="Networks"
-      title-icon="fa-sitemap"
+      title-icon="share-2"
       dataset="networks"
       table-key="networks"
       order-by="Name"
diff --git a/app/docker/views/secrets/edit/secret.html b/app/docker/views/secrets/edit/secret.html
index a3418a940..0bd141d7e 100644
--- a/app/docker/views/secrets/edit/secret.html
+++ b/app/docker/views/secrets/edit/secret.html
@@ -3,7 +3,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-user-secret" title-text="Secret details"></rd-widget-header>
+      <rd-widget-header icon="lock" feather-icon="true" title-text="Secret details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
diff --git a/app/docker/views/secrets/secrets.html b/app/docker/views/secrets/secrets.html
index 91410162f..23e0e9175 100644
--- a/app/docker/views/secrets/secrets.html
+++ b/app/docker/views/secrets/secrets.html
@@ -4,7 +4,7 @@
   <div class="col-sm-12">
     <secrets-datatable
       title-text="Secrets"
-      title-icon="fa-user-secret"
+      title-icon="lock"
       dataset="secrets"
       table-key="secrets"
       order-by="Name"
diff --git a/app/docker/views/services/edit/includes/configs.html b/app/docker/views/services/edit/includes/configs.html
index 4eb47e4b9..ab66604f8 100644
--- a/app/docker/views/services/edit/includes/configs.html
+++ b/app/docker/views/services/edit/includes/configs.html
@@ -1,6 +1,6 @@
 <form ng-if="applicationState.endpoint.apiVersion >= 1.3" id="service-configs" ng-submit="updateService(service)">
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Configs"> </rd-widget-header>
+    <rd-widget-header icon="list" feather-icon="true" title-text="Configs"> </rd-widget-header>
     <rd-widget-body classes="no-padding">
       <div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
         Add a config:
diff --git a/app/docker/views/services/edit/includes/constraints.html b/app/docker/views/services/edit/includes/constraints.html
index 372bd6660..372bce832 100644
--- a/app/docker/views/services/edit/includes/constraints.html
+++ b/app/docker/views/services/edit/includes/constraints.html
@@ -1,6 +1,6 @@
 <div ng-if="service.ServiceConstraints" id="service-placement-constraints">
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Placement constraints">
+    <rd-widget-header icon="list" feather-icon="true" title-text="Placement constraints">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addPlacementConstraint(service)" ng-disabled="isUpdating">
           <i class="fa fa-plus-circle" aria-hidden="true"></i> placement constraint
diff --git a/app/docker/views/services/edit/includes/container-specs.html b/app/docker/views/services/edit/includes/container-specs.html
index a0c87501a..b7d2d93c9 100644
--- a/app/docker/views/services/edit/includes/container-specs.html
+++ b/app/docker/views/services/edit/includes/container-specs.html
@@ -1,6 +1,6 @@
 <div>
   <rd-widget>
-    <rd-widget-header icon="fa-list-alt" title-text="Container spec"></rd-widget-header>
+    <rd-widget-header icon="list" feather-icon="true" title-text="Container spec"></rd-widget-header>
     <rd-widget-body classes="no-padding">
       <table class="table">
         <tbody>
diff --git a/app/docker/views/services/edit/includes/containerlabels.html b/app/docker/views/services/edit/includes/containerlabels.html
index 6a75a84d1..711d04126 100644
--- a/app/docker/views/services/edit/includes/containerlabels.html
+++ b/app/docker/views/services/edit/includes/containerlabels.html
@@ -1,6 +1,6 @@
 <div id="service-container-labels">
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Container labels">
+    <rd-widget-header icon="list" feather-icon="true" title-text="Container labels">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating ||addContainerLabel(service)" ng-disabled="isUpdating">
           <i class="fa fa-plus-circle" aria-hidden="true"></i> container label
diff --git a/app/docker/views/services/edit/includes/environmentvariables.html b/app/docker/views/services/edit/includes/environmentvariables.html
index 20b0acdd6..c9a7398ae 100644
--- a/app/docker/views/services/edit/includes/environmentvariables.html
+++ b/app/docker/views/services/edit/includes/environmentvariables.html
@@ -1,6 +1,6 @@
 <ng-form ng-if="service.EnvironmentVariables" id="service-env-variables" name="serviceEnvForm">
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Environment variables">
+    <rd-widget-header icon="list" feather-icon="true" title-text="Environment variables">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addEnvironmentVariable(service)" ng-disabled="isUpdating">
           <i class="fa fa-plus-circle" aria-hidden="true"></i> environment variable
diff --git a/app/docker/views/services/edit/includes/hosts.html b/app/docker/views/services/edit/includes/hosts.html
index 58a3246cf..407dab91e 100644
--- a/app/docker/views/services/edit/includes/hosts.html
+++ b/app/docker/views/services/edit/includes/hosts.html
@@ -1,6 +1,6 @@
 <div>
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Hosts file entries">
+    <rd-widget-header icon="list" feather-icon="true" title-text="Hosts file entries">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating ||addHostsEntry(service)" ng-disabled="isUpdating">
           <i class="fa fa-plus-circle" aria-hidden="true"></i> add host entry
diff --git a/app/docker/views/services/edit/includes/image.html b/app/docker/views/services/edit/includes/image.html
index 2a3fae3a2..272870610 100644
--- a/app/docker/views/services/edit/includes/image.html
+++ b/app/docker/views/services/edit/includes/image.html
@@ -1,6 +1,6 @@
 <div id="service-container-image" authorization="DockerServiceUpdate">
   <rd-widget>
-    <rd-widget-header icon="fa-clone" title-text="Change container image"> </rd-widget-header>
+    <rd-widget-header icon="list" feather-icon="true" title-text="Change container image"> </rd-widget-header>
     <rd-widget-body ng-if="!isUpdating">
       <form class="form-horizontal">
         <por-image-registry
diff --git a/app/docker/views/services/edit/includes/logging.html b/app/docker/views/services/edit/includes/logging.html
index 783140e7a..f65304a38 100644
--- a/app/docker/views/services/edit/includes/logging.html
+++ b/app/docker/views/services/edit/includes/logging.html
@@ -1,6 +1,6 @@
 <div id="service-logging-driver">
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Logging driver"> </rd-widget-header>
+    <rd-widget-header icon="list" feather-icon="true" title-text="Logging driver"> </rd-widget-header>
     <rd-widget-body classes="no-padding">
       <div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
         Driver:
diff --git a/app/docker/views/services/edit/includes/mounts.html b/app/docker/views/services/edit/includes/mounts.html
index 874c70d47..22346e690 100644
--- a/app/docker/views/services/edit/includes/mounts.html
+++ b/app/docker/views/services/edit/includes/mounts.html
@@ -1,6 +1,6 @@
 <div ng-if="service.ServiceMounts" id="service-mounts">
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Mounts">
+    <rd-widget-header icon="list" feather-icon="true" title-text="Mounts">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating ||addMount(service)" ng-disabled="isUpdating">
           <i class="fa fa-plus-circle" aria-hidden="true"></i> mount
diff --git a/app/docker/views/services/edit/includes/networks.html b/app/docker/views/services/edit/includes/networks.html
index 4470fee18..5d88ac388 100644
--- a/app/docker/views/services/edit/includes/networks.html
+++ b/app/docker/views/services/edit/includes/networks.html
@@ -1,6 +1,6 @@
 <div id="service-network-specs">
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Networks">
+    <rd-widget-header icon="list" feather-icon="true" title-text="Networks">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addNetwork(service)" ng-disabled="isUpdating">
           <i class="fa fa-plus-circle" aria-hidden="true"></i> network
diff --git a/app/docker/views/services/edit/includes/placementPreferences.html b/app/docker/views/services/edit/includes/placementPreferences.html
index 71d0c6a97..b3f74957d 100644
--- a/app/docker/views/services/edit/includes/placementPreferences.html
+++ b/app/docker/views/services/edit/includes/placementPreferences.html
@@ -1,6 +1,6 @@
 <div ng-if="service.ServicePreferences" id="service-placement-preferences">
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Placement preferences">
+    <rd-widget-header icon="list" feather-icon="true" title-text="Placement preferences">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addPlacementPreference(service)" ng-disabled="isUpdating">
           <i class="fa fa-plus-circle" aria-hidden="true"></i> placement preference
diff --git a/app/docker/views/services/edit/includes/ports.html b/app/docker/views/services/edit/includes/ports.html
index 2bd121a9c..50cea68a0 100644
--- a/app/docker/views/services/edit/includes/ports.html
+++ b/app/docker/views/services/edit/includes/ports.html
@@ -1,6 +1,6 @@
 <div>
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Published ports">
+    <rd-widget-header icon="list" feather-icon="true" title-text="Published ports">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating ||addPublishedPort(service)" ng-disabled="isUpdating">
           <i class="fa fa-plus-circle" aria-hidden="true"></i> port mapping
diff --git a/app/docker/views/services/edit/includes/resources.html b/app/docker/views/services/edit/includes/resources.html
index 633dc4ce3..300fd7594 100644
--- a/app/docker/views/services/edit/includes/resources.html
+++ b/app/docker/views/services/edit/includes/resources.html
@@ -1,6 +1,6 @@
 <div id="service-resources">
   <rd-widget>
-    <rd-widget-header icon="fa-list-alt" title-text="Resource limits and reservations"> </rd-widget-header>
+    <rd-widget-header icon="list" feather-icon="true" title-text="Resource limits and reservations"> </rd-widget-header>
     <rd-widget-body classes="no-padding">
       <table class="table">
         <tbody>
diff --git a/app/docker/views/services/edit/includes/restart.html b/app/docker/views/services/edit/includes/restart.html
index 1e1ebfc66..c6b06e095 100644
--- a/app/docker/views/services/edit/includes/restart.html
+++ b/app/docker/views/services/edit/includes/restart.html
@@ -1,6 +1,6 @@
 <div id="service-restart-policy">
   <rd-widget>
-    <rd-widget-header icon="fa-list-alt" title-text="Restart policy"> </rd-widget-header>
+    <rd-widget-header icon="list" feather-icon="true" title-text="Restart policy"> </rd-widget-header>
     <rd-widget-body classes="no-padding">
       <table class="table">
         <tbody>
diff --git a/app/docker/views/services/edit/includes/secrets.html b/app/docker/views/services/edit/includes/secrets.html
index 79e19c634..ae7bb21e8 100644
--- a/app/docker/views/services/edit/includes/secrets.html
+++ b/app/docker/views/services/edit/includes/secrets.html
@@ -1,6 +1,6 @@
 <div ng-if="applicationState.endpoint.apiVersion >= 1.25" id="service-secrets">
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Secrets"> </rd-widget-header>
+    <rd-widget-header icon="list" feather-icon="true" title-text="Secrets"> </rd-widget-header>
     <rd-widget-body classes="no-padding">
       <div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
         Add a secret:
diff --git a/app/docker/views/services/edit/includes/servicelabels.html b/app/docker/views/services/edit/includes/servicelabels.html
index f4f151a6c..76e9a2f87 100644
--- a/app/docker/views/services/edit/includes/servicelabels.html
+++ b/app/docker/views/services/edit/includes/servicelabels.html
@@ -1,6 +1,6 @@
 <div id="service-labels">
   <rd-widget>
-    <rd-widget-header icon="fa-tasks" title-text="Service labels">
+    <rd-widget-header icon="list" feather-icon="true" title-text="Service labels">
       <div class="nopadding" authorization="DockerServiceUpdate">
         <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addLabel(service)" ng-disabled="isUpdating">
           <i class="fa fa-plus-circle" aria-hidden="true"></i> label
diff --git a/app/docker/views/services/edit/includes/tasks.html b/app/docker/views/services/edit/includes/tasks.html
index a3a343513..18d5ab105 100644
--- a/app/docker/views/services/edit/includes/tasks.html
+++ b/app/docker/views/services/edit/includes/tasks.html
@@ -1,7 +1,7 @@
 <div ng-if="tasks.length > 0 && nodes" id="service-tasks">
   <tasks-datatable
     title-text="Tasks"
-    title-icon="fa-tasks"
+    title-icon="list"
     dataset="tasks"
     table-key="service-tasks"
     order-by="Updated"
diff --git a/app/docker/views/services/edit/includes/updateconfig.html b/app/docker/views/services/edit/includes/updateconfig.html
index 340e983c1..0bc60837b 100644
--- a/app/docker/views/services/edit/includes/updateconfig.html
+++ b/app/docker/views/services/edit/includes/updateconfig.html
@@ -1,6 +1,6 @@
 <div id="service-update-config">
   <rd-widget>
-    <rd-widget-header icon="fa-list-alt" title-text="Update configuration"> </rd-widget-header>
+    <rd-widget-header icon="list" feather-icon="true" title-text="Update configuration"> </rd-widget-header>
     <rd-widget-body classes="no-padding">
       <table class="table">
         <tbody>
diff --git a/app/docker/views/services/edit/service.html b/app/docker/views/services/edit/service.html
index ccc579e7d..636759b7d 100644
--- a/app/docker/views/services/edit/service.html
+++ b/app/docker/views/services/edit/service.html
@@ -12,7 +12,7 @@
 <div class="row">
   <div class="col-lg-9 col-md-9 col-xs-9">
     <rd-widget>
-      <rd-widget-header icon="fa-list-alt" title-text="Service details"></rd-widget-header>
+      <rd-widget-header icon="shuffle" feather-icon="true" title-text="Service details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
diff --git a/app/docker/views/services/services.html b/app/docker/views/services/services.html
index a27c473e3..0c2403f0d 100644
--- a/app/docker/views/services/services.html
+++ b/app/docker/views/services/services.html
@@ -4,7 +4,7 @@
   <div class="col-sm-12">
     <services-datatable
       title-text="Services"
-      title-icon="fa-list-alt"
+      title-icon="shuffle"
       dataset="services"
       table-key="services"
       order-by="Name"
diff --git a/app/docker/views/swarm/swarm.html b/app/docker/views/swarm/swarm.html
index eeb6bcc36..6e4773be2 100644
--- a/app/docker/views/swarm/swarm.html
+++ b/app/docker/views/swarm/swarm.html
@@ -3,7 +3,7 @@
 <div class="row">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-object-group" title-text="Cluster status"></rd-widget-header>
+      <rd-widget-header icon="trello" feather-icon="true" title-text="Cluster status"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
@@ -26,7 +26,7 @@
             <tr>
               <td colspan="2">
                 <div class="btn-group" role="group" aria-label="...">
-                  <a ui-sref="docker.swarm.visualizer"><i class="fa fa-object-group space-right" aria-hidden="true"></i>Go to cluster visualizer</a>
+                  <a ui-sref="docker.swarm.visualizer" class="vertical-center"><pr-icon icon="'trello'" feather="true" class-name="'icon'"></pr-icon>Go to cluster visualizer</a>
                 </div>
               </td>
             </tr>
@@ -41,7 +41,7 @@
   <div class="col-sm-12">
     <nodes-datatable
       title-text="Nodes"
-      title-icon="fa-hdd"
+      title-icon="trello"
       dataset="nodes"
       table-key="nodes"
       order-by="Hostname"
diff --git a/app/docker/views/swarm/visualizer/swarmvisualizer.html b/app/docker/views/swarm/visualizer/swarmvisualizer.html
index f1c3d9ce0..b4a377f69 100644
--- a/app/docker/views/swarm/visualizer/swarmvisualizer.html
+++ b/app/docker/views/swarm/visualizer/swarmvisualizer.html
@@ -4,7 +4,7 @@
 <div class="row">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-object-group" title-text="Cluster information">
+      <rd-widget-header icon="trello" feather-icon="true" title-text="Cluster information">
         <div class="pull-right">
           <button type="button" class="btn btn-sm btn-primary" ng-click="changeShowInformationPanel(true)" ng-if="!state.ShowInformationPanel">Show</button>
           <button type="button" class="btn btn-sm btn-primary" ng-click="changeShowInformationPanel(false)" ng-if="state.ShowInformationPanel">Hide</button>
@@ -67,7 +67,7 @@
 <div class="row" ng-if="visualizerData">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-object-group" title-text="Cluster visualizer"></rd-widget-header>
+      <rd-widget-header icon="trello" feather-icon="true" title-text="Cluster visualizer"></rd-widget-header>
       <rd-widget-body>
         <div class="visualizer_container">
           <div class="node" ng-repeat="node in visualizerData.nodes | orderBy : ['Role', 'Hostname'] track by $index">
diff --git a/app/docker/views/volumes/edit/volume.html b/app/docker/views/volumes/edit/volume.html
index 12162f023..6ccfb9da6 100644
--- a/app/docker/views/volumes/edit/volume.html
+++ b/app/docker/views/volumes/edit/volume.html
@@ -3,7 +3,7 @@
 <div class="row" ng-if="volume">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-cube" title-text="Volume details"></rd-widget-header>
+      <rd-widget-header icon="database" feather-icon="true" title-text="Volume details"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
diff --git a/app/docker/views/volumes/volumes.html b/app/docker/views/volumes/volumes.html
index 0ce78c658..fc6bf41d1 100644
--- a/app/docker/views/volumes/volumes.html
+++ b/app/docker/views/volumes/volumes.html
@@ -5,7 +5,7 @@
   <div class="col-sm-12">
     <volumes-datatable
       title-text="Volumes"
-      title-icon="fa-hdd"
+      title-icon="database"
       dataset="volumes"
       table-key="volumes"
       order-by="Id"
diff --git a/app/portainer/components/custom-templates-list/customTemplatesList.html b/app/portainer/components/custom-templates-list/customTemplatesList.html
index 9be63c932..d08be5ef4 100644
--- a/app/portainer/components/custom-templates-list/customTemplatesList.html
+++ b/app/portainer/components/custom-templates-list/customTemplatesList.html
@@ -1,9 +1,7 @@
 <div class="datatable">
   <rd-widget>
+    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle"> <pr-icon icon="$ctrl.titleIcon" class-name="space-right"></pr-icon> {{ $ctrl.titleText }} </div>
-      </div>
       <div class="actionBar">
         <button type="button" class="btn btn-sm btn-primary" ui-state="$ctrl.createPath"> <i class="fa fa-plus space-right" aria-hidden="true"></i>Add Custom Template </button>
       </div>
diff --git a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
index 26f0d9c87..4e3128ed4 100644
--- a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
+++ b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
@@ -1,9 +1,7 @@
 <div class="datatable">
   <rd-widget>
+    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
     <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" ng-if="$ctrl.isAdmin">
         <button
           ng-if="!$ctrl.endpointType"
diff --git a/app/portainer/components/template-list/templateList.html b/app/portainer/components/template-list/templateList.html
index 681c628f9..222b24f72 100644
--- a/app/portainer/components/template-list/templateList.html
+++ b/app/portainer/components/template-list/templateList.html
@@ -1,9 +1,7 @@
 <div class="datatable">
   <rd-widget>
+    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa mr-1" ng-class="$ctrl.titleIcon" aria-hidden="true"></i> {{ $ctrl.titleText }} </div>
-      </div>
       <div class="mx-3">
         <div class="actionBar">
           <div>
diff --git a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
index ccfc16b97..98ae467d0 100644
--- a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
+++ b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
@@ -59,7 +59,7 @@
     <custom-templates-list
       ng-if="$ctrl.templates"
       title-text="Templates"
-      title-icon="fa-rocket"
+      title-icon="edit"
       templates="$ctrl.templates"
       table-key="customTemplates"
       create-path="docker.templates.custom.new"
diff --git a/app/portainer/views/endpoint-registries/registries.html b/app/portainer/views/endpoint-registries/registries.html
index 593f1dc2b..770dcd5b0 100644
--- a/app/portainer/views/endpoint-registries/registries.html
+++ b/app/portainer/views/endpoint-registries/registries.html
@@ -4,7 +4,7 @@
   <div class="col-sm-12">
     <registries-datatable
       title-text="Registries"
-      title-icon="fa-database"
+      title-icon="radio"
       dataset="$ctrl.registries"
       table-key="endpointRegistries"
       order-by="Name"
diff --git a/app/portainer/views/registries/registries.html b/app/portainer/views/registries/registries.html
index b174d5fd6..f266b5e9d 100644
--- a/app/portainer/views/registries/registries.html
+++ b/app/portainer/views/registries/registries.html
@@ -8,7 +8,7 @@
   <div class="col-sm-12">
     <registries-datatable
       title-text="Registries"
-      title-icon="fa-database"
+      title-icon="radio"
       dataset="registries"
       table-key="registries"
       order-by="Name"
diff --git a/app/portainer/views/stacks/edit/stack.html b/app/portainer/views/stacks/edit/stack.html
index 02044d850..4085a0014 100644
--- a/app/portainer/views/stacks/edit/stack.html
+++ b/app/portainer/views/stacks/edit/stack.html
@@ -234,7 +234,7 @@
   <div class="col-sm-12">
     <services-datatable
       title-text="Services"
-      title-icon="fa-list-alt"
+      title-icon="list"
       dataset="services"
       table-key="stack-services"
       order-by="Name"
diff --git a/app/portainer/views/templates/templates.html b/app/portainer/views/templates/templates.html
index fcd48bd09..c78e4c1ec 100644
--- a/app/portainer/views/templates/templates.html
+++ b/app/portainer/views/templates/templates.html
@@ -261,7 +261,7 @@
     <template-list
       ng-if="templates"
       title-text="Templates"
-      title-icon="fa-rocket"
+      title-icon="edit"
       templates="templates"
       table-key="templates"
       select-action="selectTemplate"
diff --git a/app/react/components/Widget/WidgetTitle.tsx b/app/react/components/Widget/WidgetTitle.tsx
index d543a1979..e34ea31f6 100644
--- a/app/react/components/Widget/WidgetTitle.tsx
+++ b/app/react/components/Widget/WidgetTitle.tsx
@@ -25,7 +25,11 @@ export function WidgetTitle({
     <div className="widget-header">
       <div className="row">
         <span className={clsx('pull-left', className)}>
-          <Icon icon={icon} feather={featherIcon} className="space-right" />
+          <Icon
+            icon={icon}
+            feather={featherIcon}
+            className="icon-nested-blue icon-primary space-right"
+          />
           <span>{title}</span>
         </span>
         <span className={clsx('pull-right', className)}>{children}</span>
diff --git a/app/react/components/datatables/TableTitle.tsx b/app/react/components/datatables/TableTitle.tsx
index 55822ea71..26685108f 100644
--- a/app/react/components/datatables/TableTitle.tsx
+++ b/app/react/components/datatables/TableTitle.tsx
@@ -21,7 +21,11 @@ export function TableTitle({
   return (
     <div className="toolBar">
       <div className="toolBarTitle">
-        <Icon icon={icon} feather={featherIcon} className="space-right" />
+        <Icon
+          icon={icon}
+          feather={featherIcon}
+          className="icon-nested-blue icon-primary space-right"
+        />
 
         {label}
       </div>
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
index 60af5f007..088c119a4 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
@@ -140,7 +140,7 @@ export function ContainersDatatable({
 
   return (
     <TableContainer>
-      <TableTitle icon="fa-cubes" label="Containers">
+      <TableTitle icon="box" featherIcon label="Containers">
         <SearchBar value={searchBarValue} onChange={handleSearchBarChange} />
         <TableActions>
           <ContainersDatatableActions