From 3239a61bda66488f2e5c87c866a4128ce894876d Mon Sep 17 00:00:00 2001
From: Zhang Hao <hao.zhang@portainer.io>
Date: Wed, 27 Jul 2022 07:20:21 +0800
Subject: [PATCH] refactor(container): container creation page and plus button
 [EE-3744] (#7325)

---
 .../swarm-node-details-panel.html                  |  2 +-
 app/docker/views/configs/create/createconfig.html  |  2 +-
 .../views/containers/create/createcontainer.html   | 14 +++++++-------
 app/docker/views/images/build/buildimage.html      |  2 +-
 app/docker/views/images/edit/image.html            |  2 +-
 app/docker/views/secrets/create/createsecret.html  |  4 +++-
 .../views/services/create/createservice.html       | 14 +++++++-------
 .../views/services/create/includes/config.html     |  4 +++-
 .../create/includes/resources-placement.html       |  4 ++--
 .../views/services/create/includes/secret.html     |  4 +++-
 .../views/services/edit/includes/configs.html      |  2 +-
 .../views/services/edit/includes/constraints.html  |  2 +-
 .../services/edit/includes/containerlabels.html    |  2 +-
 .../edit/includes/environmentvariables.html        |  2 +-
 app/docker/views/services/edit/includes/hosts.html |  2 +-
 .../views/services/edit/includes/logging.html      |  2 +-
 .../views/services/edit/includes/mounts.html       |  2 +-
 .../views/services/edit/includes/networks.html     |  2 +-
 .../edit/includes/placementPreferences.html        |  2 +-
 app/docker/views/services/edit/includes/ports.html |  2 +-
 .../views/services/edit/includes/secrets.html      |  2 +-
 .../services/edit/includes/servicelabels.html      |  2 +-
 app/docker/views/volumes/create/createvolume.html  |  2 +-
 23 files changed, 42 insertions(+), 36 deletions(-)

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 53fbe4501..582717831 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
@@ -33,7 +33,7 @@
             <tr>
               <td>
                 <div class="nopadding">
-                  <a class="btn btn-default btn-sm pull-right" ng-click="$ctrl.addLabel(node)"> <i class="fa fa-plus-circle" aria-hidden="true"></i> label </a>
+                  <a class="btn btn-default btn-sm pull-right" ng-click="$ctrl.addLabel(node)"> <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> label </a>
                 </div>
                 Node Labels
               </td>
diff --git a/app/docker/views/configs/create/createconfig.html b/app/docker/views/configs/create/createconfig.html
index 995919333..df2808e3d 100644
--- a/app/docker/views/configs/create/createconfig.html
+++ b/app/docker/views/configs/create/createconfig.html
@@ -31,7 +31,7 @@
             <div class="col-sm-12" style="margin-top: 5px">
               <label class="control-label text-left">Labels</label>
               <span class="label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addLabel()">
-                <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
+                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label
               </span>
             </div>
             <!-- labels-input-list -->
diff --git a/app/docker/views/containers/create/createcontainer.html b/app/docker/views/containers/create/createcontainer.html
index 29cb8129d..33b8e609a 100644
--- a/app/docker/views/containers/create/createcontainer.html
+++ b/app/docker/views/containers/create/createcontainer.html
@@ -103,7 +103,7 @@
                 ></portainer-tooltip>
               </label>
               <span class="label label-default interactive" style="margin-left: 10px" ng-click="addPortBinding()">
-                <i class="fa fa-plus-circle" aria-hidden="true"></i> publish a new network port
+                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> publish a new network port
               </span>
             </div>
             <!-- port-mapping-input-list -->
@@ -334,7 +334,7 @@
                     style="margin-left: 10px"
                     ng-click="!formValues.LogDriverName || formValues.LogDriverName === 'none' || addLogDriverOpt(formValues.LogDriverName)"
                   >
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add logging driver option
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add logging driver option
                   </span>
                 </div>
                 <!-- logging-opts-input-list -->
@@ -367,7 +367,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Volume mapping</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addVolume()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional volume
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> map additional volume
                   </span>
                 </div>
                 <!-- volumes-input-list -->
@@ -525,7 +525,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Hosts file entries</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addExtraHost()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add additional entry
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add additional entry
                   </span>
                 </div>
                 <!-- extra-hosts-input-list -->
@@ -554,7 +554,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Labels</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addLabel()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label
                   </span>
                 </div>
                 <!-- labels-input-list -->
@@ -645,7 +645,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Devices</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addDevice()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add device
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add device
                   </span>
                 </div>
                 <!-- devices-input-list -->
@@ -672,7 +672,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Sysctls</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addSysctl()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add sysctl
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add sysctl
                   </span>
                 </div>
                 <!-- sysctls-input-list -->
diff --git a/app/docker/views/images/build/buildimage.html b/app/docker/views/images/build/buildimage.html
index 24ee450ee..207e0ccc2 100644
--- a/app/docker/views/images/build/buildimage.html
+++ b/app/docker/views/images/build/buildimage.html
@@ -17,7 +17,7 @@
                 <div class="col-sm-12">
                   <label class="control-label text-left">Names</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addImageName()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add additional name
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add additional name
                   </span>
                 </div>
               </div>
diff --git a/app/docker/views/images/edit/image.html b/app/docker/views/images/edit/image.html
index 2efb8c8f2..955630666 100644
--- a/app/docker/views/images/edit/image.html
+++ b/app/docker/views/images/edit/image.html
@@ -251,7 +251,7 @@
                     {{ layer.CreatedBy | imagelayercommand | truncate: 130 }}
                     <span ng-if="layer.CreatedBy.length > 130" style="margin-left: 5px">
                       <a id="layer-command-expander{{ $index }}" class="btn" ng-click="toggleLayerCommand($index)">
-                        <i class="fa fa-plus-circle" aria-hidden="true"></i>
+                        <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon>
                       </a>
                     </span>
                   </span>
diff --git a/app/docker/views/secrets/create/createsecret.html b/app/docker/views/secrets/create/createsecret.html
index 3acc833df..88978a724 100644
--- a/app/docker/views/secrets/create/createsecret.html
+++ b/app/docker/views/secrets/create/createsecret.html
@@ -38,7 +38,9 @@
           <div class="form-group">
             <div class="col-sm-12" style="margin-top: 5px">
               <label class="control-label text-left">Labels</label>
-              <span class="label label-default interactive" style="margin-left: 10px" ng-click="addLabel()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add label </span>
+              <span class="label label-default interactive" style="margin-left: 10px" ng-click="addLabel()">
+                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label
+              </span>
             </div>
             <!-- labels-input-list -->
             <div class="col-sm-12 form-inline" style="margin-top: 10px">
diff --git a/app/docker/views/services/create/createservice.html b/app/docker/views/services/create/createservice.html
index 91f9bcd6e..e60fde4ee 100644
--- a/app/docker/views/services/create/createservice.html
+++ b/app/docker/views/services/create/createservice.html
@@ -51,7 +51,7 @@
             <div class="col-sm-12" style="margin-top: 5px">
               <label class="control-label text-left">Port mapping</label>
               <span class="label label-default interactive" style="margin-left: 10px" ng-click="addPortBinding()">
-                <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional port
+                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> map additional port
               </span>
             </div>
             <div class="col-sm-12 form-inline" style="margin-top: 10px">
@@ -218,7 +218,7 @@
                     style="margin-left: 10px"
                     ng-click="!formValues.LogDriverName || formValues.LogDriverName === 'none' || addLogDriverOpt(formValues.LogDriverName)"
                   >
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add logging driver option
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add logging driver option
                   </span>
                 </div>
                 <!-- logging-opts-input-list -->
@@ -251,7 +251,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Volume mapping</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addVolume()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional volume
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> map additional volume
                   </span>
                 </div>
                 <!-- volumes-input-list -->
@@ -350,7 +350,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Extra networks</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addExtraNetwork()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add extra network
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add extra network
                   </span>
                 </div>
                 <!-- network-input-list -->
@@ -373,7 +373,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Hosts file entries</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addHostsEntry()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add additional entry
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add additional entry
                   </span>
                 </div>
                 <!-- hosts-input-list -->
@@ -411,7 +411,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Service labels</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addLabel()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add service label
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add service label
                   </span>
                 </div>
                 <!-- labels-input-list -->
@@ -438,7 +438,7 @@
                 <div class="col-sm-12" style="margin-top: 5px">
                   <label class="control-label text-left">Container labels</label>
                   <span class="label label-default interactive" style="margin-left: 10px" ng-click="addContainerLabel()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add container label
+                    <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add container label
                   </span>
                 </div>
                 <!-- container-labels-input-list -->
diff --git a/app/docker/views/services/create/includes/config.html b/app/docker/views/services/create/includes/config.html
index 47dcd46c8..e860e51e8 100644
--- a/app/docker/views/services/create/includes/config.html
+++ b/app/docker/views/services/create/includes/config.html
@@ -2,7 +2,9 @@
   <div class="form-group">
     <div class="col-sm-12" style="margin-top: 5px">
       <label class="control-label text-left">Configs</label>
-      <span class="label label-default interactive" style="margin-left: 10px" ng-click="addConfig()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add a config </span>
+      <span class="label label-default interactive" style="margin-left: 10px" ng-click="addConfig()">
+        <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add a config
+      </span>
     </div>
     <!-- info message -->
     <div class="form-group" ng-show="formValues.Configs.$invalid" style="margin-bottom: 0px">
diff --git a/app/docker/views/services/create/includes/resources-placement.html b/app/docker/views/services/create/includes/resources-placement.html
index c293b9ca6..db986d4eb 100644
--- a/app/docker/views/services/create/includes/resources-placement.html
+++ b/app/docker/views/services/create/includes/resources-placement.html
@@ -56,7 +56,7 @@
     <div class="col-sm-12" style="margin-top: 5px">
       <label class="control-label text-left">Placement constraints</label>
       <span class="label label-default interactive" style="margin-left: 10px" ng-click="addPlacementConstraint()">
-        <i class="fa fa-plus-circle" aria-hidden="true"></i> placement constraint
+        <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> placement constraint
       </span>
     </div>
     <div class="col-sm-12 form-inline" style="margin-top: 10px">
@@ -87,7 +87,7 @@
     <div class="col-sm-12" style="margin-top: 5px">
       <label class="control-label text-left">Placement preferences</label>
       <span class="label label-default interactive" style="margin-left: 10px" ng-click="addPlacementPreference()">
-        <i class="fa fa-plus-circle" aria-hidden="true"></i> placement preference
+        <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> placement preference
       </span>
     </div>
     <div class="col-sm-12 form-inline" style="margin-top: 10px">
diff --git a/app/docker/views/services/create/includes/secret.html b/app/docker/views/services/create/includes/secret.html
index fd715cfcc..88bab8305 100644
--- a/app/docker/views/services/create/includes/secret.html
+++ b/app/docker/views/services/create/includes/secret.html
@@ -8,7 +8,9 @@
   <div class="form-group">
     <div class="col-sm-12" style="margin-top: 5px">
       <label class="control-label text-left">Secrets</label>
-      <span class="label label-default interactive" style="margin-left: 10px" ng-click="addSecret()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add a secret </span>
+      <span class="label label-default interactive" style="margin-left: 10px" ng-click="addSecret()">
+        <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add a secret
+      </span>
     </div>
     <!-- info message -->
     <div class="form-group" ng-show="formValues.Secrets.$invalid" style="margin-bottom: 0px">
diff --git a/app/docker/views/services/edit/includes/configs.html b/app/docker/views/services/edit/includes/configs.html
index 491089a01..912fd176e 100644
--- a/app/docker/views/services/edit/includes/configs.html
+++ b/app/docker/views/services/edit/includes/configs.html
@@ -7,7 +7,7 @@
         <select class="form-control" ng-options="config.Name for config in configs | orderBy: 'Name'" ng-model="newConfig">
           <option selected disabled hidden value="">Select a config</option>
         </select>
-        <a class="btn btn-default btn-sm" ng-click="addConfig(service, newConfig)"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add config </a>
+        <a class="btn btn-default btn-sm" ng-click="addConfig(service, newConfig)"> <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add config </a>
       </div>
       <table class="table" style="margin-top: 5px">
         <thead>
diff --git a/app/docker/views/services/edit/includes/constraints.html b/app/docker/views/services/edit/includes/constraints.html
index e34745bf3..2160f6ae2 100644
--- a/app/docker/views/services/edit/includes/constraints.html
+++ b/app/docker/views/services/edit/includes/constraints.html
@@ -3,7 +3,7 @@
     <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
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> placement constraint
         </a>
       </div>
     </rd-widget-header>
diff --git a/app/docker/views/services/edit/includes/containerlabels.html b/app/docker/views/services/edit/includes/containerlabels.html
index e4c708089..1e3db0415 100644
--- a/app/docker/views/services/edit/includes/containerlabels.html
+++ b/app/docker/views/services/edit/includes/containerlabels.html
@@ -3,7 +3,7 @@
     <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
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> container label
         </a>
       </div>
     </rd-widget-header>
diff --git a/app/docker/views/services/edit/includes/environmentvariables.html b/app/docker/views/services/edit/includes/environmentvariables.html
index c9a7398ae..2b81c3c5c 100644
--- a/app/docker/views/services/edit/includes/environmentvariables.html
+++ b/app/docker/views/services/edit/includes/environmentvariables.html
@@ -3,7 +3,7 @@
     <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
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> environment variable
         </a>
       </div>
     </rd-widget-header>
diff --git a/app/docker/views/services/edit/includes/hosts.html b/app/docker/views/services/edit/includes/hosts.html
index efd019bb2..e47f82f88 100644
--- a/app/docker/views/services/edit/includes/hosts.html
+++ b/app/docker/views/services/edit/includes/hosts.html
@@ -3,7 +3,7 @@
     <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
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add host entry
         </a>
       </div>
     </rd-widget-header>
diff --git a/app/docker/views/services/edit/includes/logging.html b/app/docker/views/services/edit/includes/logging.html
index 660e5f44e..71dc71d13 100644
--- a/app/docker/views/services/edit/includes/logging.html
+++ b/app/docker/views/services/edit/includes/logging.html
@@ -10,7 +10,7 @@
           <option value="none">none</option>
         </select>
         <a class="btn btn-default btn-sm" ng-click="!service.LogDriverName || service.LogDriverName === 'none' || addLogDriverOpt(service)">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> add logging driver option
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add logging driver option
         </a>
       </div>
       <table class="table">
diff --git a/app/docker/views/services/edit/includes/mounts.html b/app/docker/views/services/edit/includes/mounts.html
index 81da6e237..033cb18d0 100644
--- a/app/docker/views/services/edit/includes/mounts.html
+++ b/app/docker/views/services/edit/includes/mounts.html
@@ -3,7 +3,7 @@
     <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
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> mount
         </a>
       </div>
     </rd-widget-header>
diff --git a/app/docker/views/services/edit/includes/networks.html b/app/docker/views/services/edit/includes/networks.html
index 7f6b50b75..c1eb87a73 100644
--- a/app/docker/views/services/edit/includes/networks.html
+++ b/app/docker/views/services/edit/includes/networks.html
@@ -3,7 +3,7 @@
     <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
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> network
         </a>
       </div>
     </rd-widget-header>
diff --git a/app/docker/views/services/edit/includes/placementPreferences.html b/app/docker/views/services/edit/includes/placementPreferences.html
index 509f057f8..855e207b1 100644
--- a/app/docker/views/services/edit/includes/placementPreferences.html
+++ b/app/docker/views/services/edit/includes/placementPreferences.html
@@ -3,7 +3,7 @@
     <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
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> placement preference
         </a>
       </div>
     </rd-widget-header>
diff --git a/app/docker/views/services/edit/includes/ports.html b/app/docker/views/services/edit/includes/ports.html
index f9f141c4b..f7f6fe537 100644
--- a/app/docker/views/services/edit/includes/ports.html
+++ b/app/docker/views/services/edit/includes/ports.html
@@ -3,7 +3,7 @@
     <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
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> port mapping
         </a>
       </div>
     </rd-widget-header>
diff --git a/app/docker/views/services/edit/includes/secrets.html b/app/docker/views/services/edit/includes/secrets.html
index e1a3cee6e..e3433d613 100644
--- a/app/docker/views/services/edit/includes/secrets.html
+++ b/app/docker/views/services/edit/includes/secrets.html
@@ -15,7 +15,7 @@
           <label class="btn btn-light" ng-model="state.addSecret.override" uib-btn-radio="false">Default location</label>
           <label class="btn btn-light" ng-model="state.addSecret.override" uib-btn-radio="true">Override</label>
         </div>
-        <a class="btn btn-default btn-sm" ng-click="addSecret(service, state.addSecret)"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add secret </a>
+        <a class="btn btn-default btn-sm" ng-click="addSecret(service, state.addSecret)"> <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add secret </a>
       </div>
       <table class="table" style="margin-top: 5px">
         <thead>
diff --git a/app/docker/views/services/edit/includes/servicelabels.html b/app/docker/views/services/edit/includes/servicelabels.html
index d22d01509..e682e271b 100644
--- a/app/docker/views/services/edit/includes/servicelabels.html
+++ b/app/docker/views/services/edit/includes/servicelabels.html
@@ -3,7 +3,7 @@
     <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
+          <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> label
         </a>
       </div>
     </rd-widget-header>
diff --git a/app/docker/views/volumes/create/createvolume.html b/app/docker/views/volumes/create/createvolume.html
index 26c29ca8b..09a19100e 100644
--- a/app/docker/views/volumes/create/createvolume.html
+++ b/app/docker/views/volumes/create/createvolume.html
@@ -33,7 +33,7 @@
                 <portainer-tooltip message="'Driver options are specific to the selected driver. Please refer to the selected driver documentation.'"></portainer-tooltip>
               </label>
               <span class="label label-default interactive" style="margin-left: 10px" ng-click="addDriverOption()">
-                <i class="fa fa-plus-circle" aria-hidden="true"></i> add driver option
+                <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add driver option
               </span>
             </div>
             <!-- driver-options-input-list -->