EE-3723 update headers to feather icon (#7275)

2 years ago · 43600083a7
parent e6477b0b97
commit 43600083a7
61 changed files with 103 additions and 86 deletions
--- 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>
--- 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>
--- 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">
--- 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
--- 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>
--- 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>
--- 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>
--- 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>
--- 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">
--- 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
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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"
--- 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">
--- 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"
--- 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>
--- 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>
--- 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>
--- 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"
--- 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"
--- 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>
--- 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"
--- 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:
--- 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
--- 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>
--- 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
--- 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
--- 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
--- 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
--- 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:
--- 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
--- 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
--- 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
--- 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
--- 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>
--- 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>
--- 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:
--- 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
--- 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"
--- 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>
--- 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>
--- 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"
--- 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"
--- 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">
--- 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>
--- 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"
--- 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>
--- 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"
--- 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>
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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>
--- 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>
--- 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