From b76c2b123930289862f8fe60591c6402483778c5 Mon Sep 17 00:00:00 2001
From: Prachi Goel <prachi@li-f0e8f2cc-27e0-11b2-a85c-b2772164128d.ibm.com>
Date: Fri, 22 Nov 2024 12:45:44 +0530
Subject: [PATCH] mgr/dashboard: Carbonize Icons for Modules (Block, Object,
 File, Observability, Administration)

Fixes: https://tracker.ceph.com/issues/69017

Signed-off-by: Prachi <prgoel@redhat.com>

Modules Changed for this:
1. Block( mirroring, NVMe, ICSI, Images)
2. Object RGW (Overview, Bucket, Users, Multi-site, Gateways, NFS, Config)
3. Logs
4. Alerts
5. Services
6. Cluster
---
 .../src/app/ceph/block/block.module.ts        |  14 ++-
 .../iscsi-target-details.component.html       |   5 +-
 .../iscsi-target-form.component.html          |  63 ++++++----
 .../iscsi-target-list.component.html          |   6 +-
 .../bootstrap-create-modal.component.html     |   3 +-
 .../overview/overview.component.html          |   8 +-
 .../nvmeof-initiators-form.component.html     |   8 +-
 .../rbd-configuration-form.component.html     |   7 +-
 .../block/rbd-list/rbd-list.component.html    |  14 +--
 .../src/app/ceph/cluster/cluster.module.ts    |  17 ++-
 .../app/ceph/cluster/logs/logs.component.html |  12 +-
 ...sd-devices-selection-groups.component.html |   8 +-
 .../osd/osd-list/osd-list.component.ts        |   2 +-
 .../active-alert-list.component.html          |   7 +-
 .../silence-form/silence-form.component.html  |  13 ++-
 .../service-daemon-list.component.html        |  10 +-
 .../cluster/services/services.component.html  |  16 ++-
 ...ure-code-profile-form-modal.component.html |   5 +-
 .../pool/pool-form/pool-form.component.html   |  43 ++++---
 .../frontend/src/app/ceph/pool/pool.module.ts |  13 ++-
 .../rgw-bucket-form.component.html            |  36 +++---
 .../rgw-multisite-details.component.html      |  29 +++--
 .../rgw-multisite-export.component.html       |   6 +-
 ...w-multisite-sync-flow-modal.component.html |  12 +-
 ...w-multisite-sync-pipe-modal.component.html |  12 +-
 ...gw-multisite-zonegroup-form.component.html |   5 +-
 .../rgw-sync-data-info.component.html         |   5 +-
 .../rgw-sync-metadata-info.component.html     |   5 +-
 .../rgw-sync-primary-zone.component.html      |  32 ++++--
 .../rgw-user-form.component.html              |  59 +++++-----
 .../frontend/src/app/ceph/rgw/rgw.module.ts   |  33 +++++-
 .../src/app/core/error/error.component.html   |   5 +-
 .../src/app/core/error/error.component.ts     |   2 +
 .../components/card/card.component.html       |   4 +-
 .../shared/components/components.module.ts    |   6 +-
 .../copy2clipboard-button.component.html      |  17 +--
 .../download-button.component.html            |  16 ++-
 .../notifications-sidebar.component.html      |  27 +++--
 .../select-badges.component.html              |  13 ++-
 .../table-actions.component.html              |   6 +-
 .../datatable/table/table.component.html      |  17 ++-
 .../src/app/shared/enum/icons.enum.ts         | 108 +++++++++---------
 .../app/shared/models/cd-notification.spec.ts |   6 +-
 .../prometheus-alert-formatter.spec.ts        |   2 +-
 .../services/prometheus-alert-formatter.ts    |   2 +-
 .../frontend/src/styles/_carbon-defaults.scss |  37 ++++++
 .../frontend/src/testing/unit-test-helper.ts  |   2 +-
 47 files changed, 500 insertions(+), 278 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
index ba930c549865..e3b600bafa90 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
@@ -70,9 +70,11 @@ import {
 // Icons
 import ChevronDown from '@carbon/icons/es/chevron--down/16';
 import Close from '@carbon/icons/es/close/32';
-import AddFilled from '@carbon/icons/es/add--filled/32';
+import AddFilled from '@carbon/icons/es/add--filled/20';
 import SubtractFilled from '@carbon/icons/es/subtract--filled/32';
 import Reset from '@carbon/icons/es/reset/32';
+import SubtractAlt from '@carbon/icons/es/subtract--alt/20';
+import ProgressBarRound from '@carbon/icons/es/progress-bar--round/32';
 
 @NgModule({
   imports: [
@@ -142,7 +144,15 @@ import Reset from '@carbon/icons/es/reset/32';
 })
 export class BlockModule {
   constructor(private iconService: IconService) {
-    this.iconService.registerAll([ChevronDown, Close, AddFilled, SubtractFilled, Reset]);
+    this.iconService.registerAll([
+      ChevronDown,
+      Close,
+      AddFilled,
+      SubtractFilled,
+      Reset,
+      ProgressBarRound,
+      SubtractAlt
+    ]);
   }
 }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.html
index b137051d0ae4..77d1cbc56676 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.html
@@ -8,7 +8,10 @@
     </cds-tree-view>
     <ng-template #treeNodeTemplate
                  let-node>
-      <i [class]="node?.cdIcon"></i>
+                 {{node?.data?.cdIcon}}
+    <svg [cdsIcon]="node?.data?.cdIcon"
+         [size]="icons.size16"
+         ></svg>
       <span>{{ node?.name }}</span>
       &nbsp;
       <span class="badge"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
index d430cfe6d07b..cbffd558b6c0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
@@ -26,8 +26,9 @@
                       id="ecp-info-button"
                       type="button"
                       (click)="targetSettingsModal()">
-                <i [ngClass]="[icons.deepCheck]"
-                   aria-hidden="true"></i>
+                <svg [cdsIcon]="icons.deepCheck"
+                     [size]="icons.size16"
+                     ></svg>
               </button>
             </div>
 
@@ -74,8 +75,9 @@
                 <button class="btn btn-light"
                         type="button"
                         (click)="removePortal(i, portal)">
-                  <i [ngClass]="[icons.destroy]"
-                     aria-hidden="true"></i>
+                  <svg [cdsIcon]="icons.destroy"
+                       [size]="icons.size16"
+                       ></svg>
                 </button>
               </div>
             </ng-container>
@@ -87,7 +89,9 @@
                            [messages]="messages.portals"
                            (selection)="onPortalSelection($event)"
                            elemClass="btn btn-light float-end">
-                  <i [ngClass]="[icons.add]"></i>
+                  <svg [cdsIcon]="icons.add"
+                       [size]="icons.size16"
+                       ></svg>
                   <ng-container i18n>Add portal</ng-container>
                 </cd-select>
               </div>
@@ -124,14 +128,16 @@
                 <button class="btn btn-light"
                         type="button"
                         (click)="imageSettingsModal(image)">
-                  <i [ngClass]="[icons.deepCheck]"
-                     aria-hidden="true"></i>
+                  <svg [cdsIcon]="icons.deepCheck"
+                       [size]="icons.size16"
+                       ></svg>
                 </button>
                 <button class="btn btn-light"
                         type="button"
                         (click)="removeImage(i, image)">
-                  <i [ngClass]="[icons.destroy]"
-                     aria-hidden="true"></i>
+                  <svg [cdsIcon]="icons.destroy"
+                       [size]="icons.size16"
+                       ></svg>
                 </button>
 
               </div>
@@ -166,7 +172,9 @@
                            [messages]="messages.images"
                            (selection)="onImageSelection($event)"
                            elemClass="btn btn-light float-end">
-                  <i [ngClass]="[icons.add]"></i>
+                  <svg [cdsIcon]="icons.add"
+                       [size]="icons.size16"
+                       ></svg>
                   <ng-container i18n>Add image</ng-container>
                 </cd-select>
               </div>
@@ -488,8 +496,9 @@
                         <button class="btn btn-light"
                                 type="button"
                                 (click)="removeInitiatorImage(initiator, li, ii, image)">
-                          <i [ngClass]="[icons.destroy]"
-                             aria-hidden="true"></i>
+                          <svg [cdsIcon]="icons.destroy"
+                               [size]="icons.size16"
+                               ></svg>
                         </button>
                       </div>
                     </ng-container>
@@ -504,7 +513,9 @@
                                    [options]="imagesInitiatorSelections[ii]"
                                    [messages]="messages.initiatorImage"
                                    elemClass="btn btn-light float-end">
-                          <i [ngClass]="[icons.add]"></i>
+                          <svg [cdsIcon]="icons.add"
+                               [size]="icons.size16"
+                               ></svg>
                           <ng-container i18n>Add image</ng-container>
                         </cd-select>
                       </div>
@@ -522,7 +533,9 @@
 
                 <button (click)="addInitiator(); false"
                         class="btn btn-light float-end">
-                  <i [ngClass]="[icons.add]"></i>
+                  <svg [cdsIcon]="icons.add"
+                       [size]="icons.size16"
+                       ></svg>
                   <ng-container i18n>Add initiator</ng-container>
                 </button>
               </div>
@@ -579,8 +592,9 @@
                         <button class="btn btn-light"
                                 type="button"
                                 (click)="removeGroupInitiator(group, i, gi)">
-                          <i [ngClass]="[icons.destroy]"
-                             aria-hidden="true"></i>
+                          <svg [cdsIcon]="icons.destroy"
+                               [size]="icons.size16"
+                               ></svg>
                         </button>
                       </div>
                     </ng-container>
@@ -592,7 +606,9 @@
                                    [messages]="messages.groupInitiator"
                                    (selection)="onGroupMemberSelection($event, gi)"
                                    elemClass="btn btn-light float-end">
-                          <i [ngClass]="[icons.add]"></i>
+                          <svg [cdsIcon]="icons.add"
+                               [size]="icons.size16"
+                               ></svg>
                           <ng-container i18n>Add initiator</ng-container>
                         </cd-select>
                       </div>
@@ -618,8 +634,9 @@
                         <button class="btn btn-light"
                                 type="button"
                                 (click)="removeGroupDisk(group, i, gi)">
-                          <i [ngClass]="[icons.destroy]"
-                             aria-hidden="true"></i>
+                          <svg [cdsIcon]="icons.destroy"
+                               [size]="icons.size16"
+                               ></svg>
                         </button>
                       </div>
                     </ng-container>
@@ -630,7 +647,9 @@
                                    [options]="groupDiskSelections[gi]"
                                    [messages]="messages.initiatorImage"
                                    elemClass="btn btn-light float-end">
-                          <i [ngClass]="[icons.add]"></i>
+                          <svg [cdsIcon]="icons.add"
+                               [size]="icons.size16"
+                               ></svg>
                           <ng-container i18n>Add image</ng-container>
                         </cd-select>
                       </div>
@@ -650,7 +669,9 @@
 
                 <button (click)="addGroup(); false"
                         class="btn btn-light float-end">
-                  <i [ngClass]="[icons.add]"></i>
+                  <svg [cdsIcon]="icons.add"
+                       [size]="icons.size16"
+                       ></svg>
                   <ng-container i18n>Add group</ng-container>
                 </button>
               </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-list/iscsi-target-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-list/iscsi-target-list.component.html
index ef7fa2a178ea..0d6e60f1e77c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-list/iscsi-target-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-list/iscsi-target-list.component.html
@@ -38,9 +38,9 @@
     <button class="btn btn-light"
             type="button"
             (click)="configureDiscoveryAuth()">
-      <i [ngClass]="[icons.key]"
-         aria-hidden="true">
-      </i>
+      <svg [cdsIcon]="icons.key"
+           [size]="icons.size16"
+           ></svg>
       <ng-container i18n>Discovery authentication</ng-container>
     </button>
   </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-create-modal/bootstrap-create-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-create-modal/bootstrap-create-modal.component.html
index 7e91980c5a92..706961df83a8 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-create-modal/bootstrap-create-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-create-modal/bootstrap-create-modal.component.html
@@ -79,8 +79,7 @@
                     readonly>
           </textarea>
         </cds-textarea-label>
-        <cd-copy-2-clipboard-button class="float-end"
-                                    source="token">
+        <cd-copy-2-clipboard-button source="token">
         </cd-copy-2-clipboard-button>
       </div>
     </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.html
index c0ce32de21ff..0e708ed4354a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.html
@@ -19,12 +19,12 @@
                            size="md"
                            (click)="updateSiteName()"
                            [title]="editing ? 'Save' : 'Edit'">
-            <svg cdsIcon="edit"
-                 size="32"
+            <svg [cdsIcon]="icons.edit"
+                 [size]="icons.size32"
                  class="cds--btn__icon"
                  *ngIf="!editing"></svg>
-            <svg cdsIcon="checkmark"
-                 size="32"
+            <svg [cdsIcon]="icons.check"
+                 [size]="icons.size32"
                  class="cds--btn__icon"
                  *ngIf="editing"></svg>
           </cds-icon-button>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-initiators-form/nvmeof-initiators-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-initiators-form/nvmeof-initiators-form.component.html
index a0a61d7ae480..2bc7b2f994b2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-initiators-form/nvmeof-initiators-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-initiators-form/nvmeof-initiators-form.component.html
@@ -46,14 +46,18 @@
                           || initiatorForm.get('addHost.addedHosts').controls.length === 32
                           || (initiatorForm.get('addHost.addedHosts').controls.length !== 1 && initiatorForm.get('addHost.addedHosts').controls.length !== hi+1)"
                           (click)="addHost()">
-                    <i class="fa fa-plus"></i>
+                    <svg [cdsIcon]="icons.add"
+                         [size]="icons.size16"
+                         ></svg>
                   </button>
                   <button class="btn btn-light"
                           type="button"
                           id="delete-button-{{hi}}"
                           [disabled]="addedHosts.controls.length === 1"
                           (click)="removeHost(hi)">
-                    <i class="fa fa-trash-o"></i>
+                    <svg [cdsIcon]="icons.trash"
+                         [size]="icons.size16"
+                         ></svg>
                   </button>
                   <ng-container *ngIf="initiatorForm.get('addHost.addedHosts').controls[hi].invalid
                                 && (initiatorForm.get('addHost.addedHosts').controls[hi].dirty
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
index e32c3134ec35..6e704a0124f2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
@@ -6,8 +6,10 @@
     <h5 class="cd-header">
       <legend (click)="toggleSectionVisibility(section.class)"
               class="collapsible">
-        {{ section.heading }} <i [ngClass]="!sectionVisibility[section.class] ? icons.addCircle : icons.minusCircle"
-                                 aria-hidden="true"></i>
+        {{ section.heading }}&nbsp;
+        <svg [cdsIcon]="!sectionVisibility[section.class] ? icons.addCircle : icons.minusCircle"
+             [size]="icons.size20"
+             ></svg>
       </legend>
     </h5>
     <div class="{{ section.class }}"
@@ -64,7 +66,6 @@
               <ng-template #resetIcon>
                 <svg cdsIcon="reset"
                      size="32"
-                     class="cds--btn__icon"
                      *ngIf="form.get('configuration').get(option.name).disabled"></svg>
               </ng-template>
             </cds-icon-button>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
index b1f36967d70c..76fabd9c817f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
@@ -90,10 +90,9 @@
              let-column="data.column"
              let-value="data.value"
              let-row="data.row">
-
   <i [ngClass]="[icons.spinner, icons.spin]"
      *ngIf="row.cdExecuting"></i>
-  <span [ngClass]="column?.customTemplateConfig?.valueClass">
+    <span [ngClass]="column?.customTemplateConfig?.valueClass">
     {{ value }}
   </span>
   <span *ngIf="row.cdExecuting"
@@ -102,10 +101,12 @@
         'text-muted italic'">
     ({{ row.cdExecuting }})
   </span>
-  <i *ngIf="row.source && row.source === 'REMOVING'"
-     i18n-title
-     title="RBD in status 'Removing'"
-     class="{{ icons.warning }} warn"></i>
+  <svg  *ngIf="row.source && row.source === 'REMOVING'"
+        i18n-title
+        title="RBD in status 'Removing'"
+        [cdsIcon]="icons.warning"
+        [size]="icons.size16"
+        class="cds-warning-color"></svg>
 </ng-template>
 
 <ng-template #forcePromoteConfirmation>
@@ -132,7 +133,6 @@
                   decimals="2">
   </cd-usage-bar>
   </ng-template>
-
 </ng-template>
 
 <ng-template #usageTooltip>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
index ff1eeb904f2f..7503f5f355c4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -14,9 +14,13 @@ import {
   ModalModule,
   TreeviewModule,
   ListModule,
-  ToggletipModule
+  ToggletipModule,
+  IconModule,
+  IconService
 } from 'carbon-components-angular';
-
+import Analytics from '@carbon/icons/es/analytics/16';
+import CloseFilled from '@carbon/icons/es/close--filled/16';
+import ProgressBarRoundIcon from '@carbon/icons/es/progress-bar--round/32';
 import {
   NgbActiveModal,
   NgbDatepickerModule,
@@ -110,7 +114,8 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
     InputModule,
     ModalModule,
     ListModule,
-    ToggletipModule
+    ToggletipModule,
+    IconModule
   ],
   declarations: [
     MonitorComponent,
@@ -161,4 +166,8 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
   ],
   providers: [NgbActiveModal]
 })
-export class ClusterModule {}
+export class ClusterModule {
+  constructor(private iconService: IconService) {
+    this.iconService.registerAll([Analytics, CloseFilled, ProgressBarRoundIcon]);
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
index f92674e50743..d869e15062cb 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
@@ -119,7 +119,9 @@
              i18n>Keyword:</label>
       <div class="input-group">
         <span class="input-group-text">
-          <i [ngClass]="[icons.search]"></i>
+          <svg [cdsIcon]="icons.search"
+               [size]="icons.size16"
+               ></svg>
         </span>
 
         <input class="form-control"
@@ -132,7 +134,9 @@
                 class="btn btn-light"
                 (click)="clearSearchKey()"
                 title="Clear">
-          <i class="icon-prepend {{ icons.destroy }}"></i>
+          <svg [cdsIcon]="icons.destroy"
+               [size]="icons.size16"
+               ></svg>
         </button>
       </div>
     </div>
@@ -155,7 +159,9 @@
                 class="btn btn-light"
                 (click)="clearDate()"
                 title="Clear">
-          <i class="icon-prepend {{ icons.destroy }}"></i>
+          <svg [cdsIcon]="icons.destroy"
+               [size]="icons.size16"
+               ></svg>
         </button>
       </div>
     </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html
index 95e51662b769..e790cf0f3d43 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html
@@ -20,7 +20,9 @@
               data-toggle="tooltip"
               [title]="addButtonTooltip"
               [disabled]="availDevices.length === 0 || !canSelect || expansionCanSelect">
-        <i [ngClass]="[icons.add]"></i>
+        <svg [cdsIcon]="icons.add"
+             [size]="icons.size16"
+             ></svg>
         <ng-container i18n>Add</ng-container>
       </button>
     </ng-container>
@@ -32,7 +34,9 @@
         <a class="tc_clearSelections"
            href=""
            (click)="clearDevices(); false">
-          <i [ngClass]="[icons.clearFilters]"></i>
+          <svg [cdsIcon]="icons.clearFilters"
+               [size]="icons.size16"
+               ></svg>
           <ng-container i18n>Clear</ng-container>
         </a>
       </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
index 670163dd909b..386ef6e10813 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
@@ -239,7 +239,7 @@ export class OsdListComponent extends ListWithDetails implements OnInit {
             }
           ),
         disable: () => this.isNotSelectedOrInState('up'),
-        icon: Icons.destroyCircle
+        icon: Icons.clearFilters
       },
       {
         name: this.actionLabels.DELETE,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.html
index c726ea319ed6..e105cae7c903 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.html
@@ -38,5 +38,10 @@
              let-row="data.row"
              let-value="data.value">
   <a [href]="value"
-     target="_blank"><i [ngClass]="[icons.lineChart]"></i> Source</a>
+     target="_blank">
+    <svg [cdsIcon]="icons.lineChart"
+         [size]="icons.size16"
+         >
+    </svg> Source
+  </a>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
index d95d21462851..e7411a05a0a6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
@@ -28,7 +28,10 @@
             i18n-ngbTooltip
             ngbTooltip="Edit"
             (click)="showMatcherModal(index)">
-      <i [ngClass]="[icons.edit]"></i>
+      <svg
+      [cdsIcon]="icons.edit"
+      [size]="icons.size16"
+      class="cds-info-color"></svg>
     </button>
     <button type="button"
             class="btn btn-light"
@@ -36,7 +39,9 @@
             i18n-ngbTooltip
             ngbTooltip="Delete"
             (click)="deleteMatcher(index)">
-      <i [ngClass]="[icons.trash]"></i>
+      <svg [cdsIcon]="icons.trash"
+           [size]="icons.size16"
+           class="cds-info-color"></svg>
     </button>
   </div>
   <span class="help-block"></span>
@@ -171,7 +176,9 @@
                         class="btn btn-light float-end my-3"
                         [ngClass]="{'btn-warning': formDir.submitted && matchers.length === 0 }"
                         (click)="showMatcherModal()">
-                  <i [ngClass]="[icons.add]"></i>
+                  <svg [cdsIcon]="icons.add"
+                       [size]="icons.size16"
+                       ></svg>
                   <ng-container i18n>Add matcher</ng-container>
                 </button>
               </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html
index 7ef576d4626b..582e75028676 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html
@@ -52,12 +52,14 @@
       <b>{{ event.created | relativeDate }} - </b>
       <span class="badge badge-info">{{ event.subject }}</span><br>
       <span *ngIf="event.level === 'INFO'">
-      <i [ngClass]="[icons.infoCircle]"
-         aria-hidden="true"></i>
+        <svg [cdsIcon]="icons.infoCircle"
+             [size]="icons.size16"
+             class="cds-info-color"></svg>
       </span>
       <span *ngIf="event.level === 'ERROR'">
-      <i [ngClass]="[icons.warning]"
-         aria-hidden="true"></i>
+        <svg [cdsIcon]="icons.warning"
+             [size]="icons.size16"
+             class="cds-warning-color"></svg>
       </span>
       {{ event.message }}
     </li>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html
index 623be9025f4a..042b180d1ba6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html
@@ -32,10 +32,10 @@
   <span ngbTooltip="Service instances running out of the total number of services requested.">
     {{ value.running }} / {{ value.size }}
   </span>
-  <i *ngIf="value.running == 0 || value.size == 0"
-     class="icon-warning-color"
-     [ngClass]="[icons.warning]">
-  </i>
+  <svg  *ngIf="value.running == 0 || value.size == 0"
+        [cdsIcon]="icons.warning"
+        [size]="icons.size16"
+        class="cds-warning-color"></svg>
 </ng-template>
 
 <ng-template #urlTpl
@@ -45,14 +45,18 @@
        target="_blank"
        [href]="serviceUrls[row.service_type]">
       {{ row.service_name }}
-      <i class="fa fa-external-link"></i>
+      <svg [cdsIcon]="icons.launch"
+           [size]="icons.size16"
+           class="cds-info-color"></svg>
     </a>
 
     <ng-template #mgmtGateway>
       <a target="_blank"
          [href]="row.service_type">
         {{ row.service_name }}
-        <i class="fa fa-external-link"></i>
+        <svg [cdsIcon]="icons.launch"
+             [size]="icons.size16"
+             class="cds-info-color"></svg>
       </a>
     </ng-template>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form-modal.component.html
index 0d74214cc514..20d4c66cdada 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form-modal.component.html
@@ -179,8 +179,9 @@
                       i18n-ngbTooltip
                       type="button"
                       (click)="toggleDCalc()">
-                <i [ngClass]="dCalc ? icons.unlock : icons.lock"
-                   aria-hidden="true"></i>
+                <svg [cdsIcon]="dCalc ? icons.unlock : icons.lock"
+                     [size]="icons.size16"
+                     class="cds-info-color"></svg>
               </button>
             </div>
             <span class="form-text text-muted"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
index 5b081cc27320..4116a140c777 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
@@ -183,11 +183,12 @@
                               [selectionLimit]="4"
                               (selection)="appSelection()">
             </cd-select-badges>
-            <i *ngIf="data.applications.selected <= 0"
-               i18n-title
-               title="Pools should be associated with an application tag"
-               class="{{icons.warning}} icon-warning-color">
-            </i>
+            <svg  *ngIf="data.applications.selected <= 0"
+                  [cdsIcon]="icons.warning"
+                  [size]="icons.size20"
+                  title="Pools should be associated with an application tag"
+                  class="cds-warning-color"
+                  i18n-title></svg>
             <span class="invalid-feedback"
                   *ngIf="!isApplicationsSelected && data.applications.selected <= 0"
                   i18n>Application selection is required!</span>
@@ -213,9 +214,7 @@
         </div>
         <!-- CRUSH -->
         <div *ngIf="isErasure || isReplicated">
-
           <legend i18n>CRUSH</legend>
-
           <!-- Erasure Profile select -->
           <div class="form-group row"
                *ngIf="isErasure">
@@ -247,15 +246,17 @@
                         id="ecp-info-button"
                         type="button"
                         (click)="data.erasureInfo = !data.erasureInfo">
-                  <i [ngClass]="[icons.questionCircle]"
-                     aria-hidden="true"></i>
+                  <svg [cdsIcon]="icons.questionCircle"
+                       [size]="icons.size20"
+                       class="cds-info-color "></svg>
                 </button>
                 <button class="btn btn-light"
                         type="button"
                         *ngIf="!editing"
                         (click)="addErasureCodeProfile()">
-                  <i [ngClass]="[icons.add]"
-                     aria-hidden="true"></i>
+                  <svg [cdsIcon]="icons.add"
+                       [size]="icons.size20"
+                       class="cds-info-color "></svg>
                 </button>
                 <button class="btn btn-light"
                         type="button"
@@ -265,8 +266,9 @@
                         triggers="manual"
                         #ecpDeletionBtn="ngbTooltip"
                         (click)="deleteErasureCodeProfile()">
-                  <i [ngClass]="[icons.trash]"
-                     aria-hidden="true"></i>
+                  <svg [cdsIcon]="icons.trash"
+                       [size]="icons.size16"
+                       class="cds-info-color"></svg>
                 </button>
               </div>
               <span class="form-text text-muted"
@@ -356,15 +358,17 @@
                           specify how CRUSH places data replicas."
                           i18n-ngbTooltip
                           (click)="data.crushInfo = !data.crushInfo">
-                    <i [ngClass]="[icons.questionCircle]"
-                       aria-hidden="true"></i>
+                    <svg [cdsIcon]="icons.questionCircle"
+                         [size]="icons.size20"
+                         class="cds-info-color"></svg>
                   </button>
                   <button class="btn btn-light"
                           type="button"
                           *ngIf="isReplicated && !editing"
                           (click)="addCrushRule()">
-                    <i [ngClass]="[icons.add]"
-                       aria-hidden="true"></i>
+                    <svg [cdsIcon]="icons.add"
+                         [size]="icons.size16"
+                         class="cds-info-color"></svg>
                   </button>
                   <button class="btn btn-light"
                           *ngIf="isReplicated && !editing"
@@ -374,8 +378,9 @@
                           triggers="manual"
                           #crushDeletionBtn="ngbTooltip"
                           (click)="deleteCrushRule()">
-                    <i [ngClass]="[icons.trash]"
-                       aria-hidden="true"></i>
+                    <svg [cdsIcon]="icons.trash"
+                         [size]="icons.size16"
+                         class="cds-info-color"></svg>
                   </button>
                 </div>
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
index 3f01b9fd9c56..21c33cbe38e2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
@@ -14,6 +14,10 @@ import { ErasureCodeProfileFormModalComponent } from './erasure-code-profile-for
 import { PoolDetailsComponent } from './pool-details/pool-details.component';
 import { PoolFormComponent } from './pool-form/pool-form.component';
 import { PoolListComponent } from './pool-list/pool-list.component';
+import { IconModule, IconService } from 'carbon-components-angular';
+import HelpIcon from '@carbon/icons/es/help/16';
+import UnlockedIcon from '@carbon/icons/es/unlocked/16';
+import LockedIcon from '@carbon/icons/es/locked/16';
 
 @NgModule({
   imports: [
@@ -24,7 +28,8 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     RouterModule,
     ReactiveFormsModule,
     NgbTooltipModule,
-    BlockModule
+    BlockModule,
+    IconModule
   ],
   exports: [PoolListComponent, PoolFormComponent],
   declarations: [
@@ -35,7 +40,11 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     PoolDetailsComponent
   ]
 })
-export class PoolModule {}
+export class PoolModule {
+  constructor(private iconService: IconService) {
+    this.iconService.registerAll([HelpIcon, UnlockedIcon, LockedIcon]);
+  }
+}
 
 const routes: Routes = [
   { path: '', component: PoolListComponent },
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
index 71097b4527c6..05432220722b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
@@ -384,8 +384,8 @@
                     [disabled]="tags.length > 19"
                     (click)="showTagModal()">
               <ng-container i18n>Add tag</ng-container>
-              <svg cdsIcon="add"
-                   size="32"
+              <svg [cdsIcon]="icons.add"
+                   [size]="icons.size16"
                    class="cds--btn__icon"></svg>
             </button>
           </cds-tooltip>
@@ -425,16 +425,16 @@
                       id="example-generator-button"
                       (click)="openUrl('https://docs.aws.amazon.com/AmazonS3/latest/userguide/example-bucket-policies.html?icmpid=docs_amazons3_console')"
                       i18n>Policy examples
-                <svg cdsIcon="launch"
-                     size="16"
+                <svg [cdsIcon]="icons.launch"
+                     [size]="icons.size16"
                      class="cds--btn__icon"></svg>
               </button>
               <button cdsButton="tertiary"
                       id="example-generator-button"
                       (click)="openUrl('https://awspolicygen.s3.amazonaws.com/policygen.html')"
                       i18n>Policy generator
-                <svg cdsIcon="launch"
-                     size="16"
+                <svg [cdsIcon]="icons.launch"
+                     [size]="icons.size16"
                      class="cds--btn__icon"></svg>
               </button>
             </cds-button-set>
@@ -445,8 +445,8 @@
                       id="clear-bucket-policy"
                       (click)="clearTextArea('bucket_policy', '{}')"
                       i18n>Clear
-                <svg cdsIcon="close"
-                     size="32"
+                <svg [cdsIcon]="icons.destroy"
+                     [size]="icons.size16"
                      class="cds--btn__icon"></svg>
               </button>
             </cds-button-set>
@@ -485,8 +485,8 @@
                       id="lifecycle-examples-button"
                       (click)="openUrl('https://docs.aws.amazon.com/cli/latest/reference/s3api/put-bucket-lifecycle.html#examples')"
                       i18n>Policy examples
-                <svg cdsIcon="launch"
-                     size="16"
+                <svg [cdsIcon]="icons.launch"
+                     [size]="icons.size16"
                      class="cds--btn__icon"></svg>
               </button>
             </cds-button-set>
@@ -497,8 +497,8 @@
                       id="clear-lifecycle"
                       (click)="clearTextArea('lifecycle', '{}')"
                       i18n>Clear
-                <svg cdsIcon="close"
-                     size="32"
+                <svg [cdsIcon]="icons.destroy"
+                     [size]="icons.size16"
                      class="cds--btn__icon"></svg>
               </button>
             </cds-button-set>
@@ -610,16 +610,16 @@
     <cds-icon-button kind="tertiary"
                      size="md"
                      (click)="showTagModal(index)">
-      <svg cdsIcon="edit"
-           size="32"
-           class="cds--btn__icon"></svg>
+      <svg [cdsIcon]="icons.edit"
+           [size]="icons.size16"
+           class="cds-info-color cds--btn__icon"></svg>
     </cds-icon-button>
     <cds-icon-button kind="danger"
                      size="md"
                      (click)="deleteTag(index)">
-      <svg cdsIcon="trash-can"
-           size="32"
-           class="cds--btn__icon"></svg>
+      <svg [cdsIcon]="icons.trash"
+           [size]="icons.size16"
+           class="cds-info-color cds--btn__icon"></svg>
     </cds-icon-button>
   </div>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html
index 3f9794e26261..40b9202909aa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html
@@ -81,12 +81,23 @@
               <span *ngIf="node?.data?.name"
                     class="me-3">
                 <span *ngIf="(node?.data?.show_warning)">
-                  <i  class="text-danger"
-                      i18n-title
-                      [title]="node?.data?.warning_message"
-                      [ngClass]="icons.danger"></i>
+                  <svg [cdsIcon]="icons.danger"
+                       [size]="icons.size16"
+                       [title]="node?.data?.warning_message"
+                       class="cds-danger-color"></svg>
                 </span>
-                <i [ngClass]="node?.data?.icon"></i>
+                <svg  *ngIf="node?.data?.icon === 'scales'"
+                      [cdsIcon]="icons.reweight"
+                      [size]="icons.size20"
+                      ></svg>
+                <svg *ngIf="node?.data?.icon === 'cube'"
+                     [cdsIcon]="icons.deploy"
+                     [size]="icons.size20"
+                     ></svg>
+                <svg *ngIf="node?.data?.icon === 'fa fa-cubes'"
+                     [cdsIcon]="icons.parentChild"
+                     [size]="icons.size20"
+                     ></svg>
                 {{ node?.data?.name }}
               </span>
               <span class="badge badge-success me-2"
@@ -109,7 +120,9 @@
                         class="btn btn-light dropdown-toggle-split ms-1"
                         (click)="openModal(node, true)"
                         [disabled]="getDisable() || node?.data?.secondary_zone">
-                  <i [ngClass]="[icons.edit]"></i>
+                  <svg [cdsIcon]="icons.edit"
+                       [size]="icons.size16"
+                       class="cds-info-color"></svg>
                 </button>
               </div>
               <ng-container *ngIf="isDeleteDisabled(node) as nodeDeleteData">
@@ -119,7 +132,9 @@
                           class="btn btn-light ms-1"
                           [disabled]="nodeDeleteData.isDisabled || node?.data?.secondary_zone"
                           (click)="delete(node)">
-                    <i [ngClass]="[icons.destroy]"></i>
+                    <svg [cdsIcon]="icons.destroy"
+                         [size]="icons.size16"
+                         class="cds-info-color"></svg>
                   </button>
                 </div>
               </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.html
index 779884936938..4f2d9cae379d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.html
@@ -8,7 +8,11 @@
           [formGroup]="exportTokenForm">
     <span *ngIf="loading"
           class="d-flex justify-content-center">
-    <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i></span>
+      <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
+    <svg [cdsIcon]="icons.down"
+         [size]="icons.size24"
+         class="cds-info-color"></svg>
+  </span>
     <div class="modal-body"
          *ngIf="!loading">
       <cd-alert-panel *ngIf="!tokenValid"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.html
index 5f13a0aedb1f..fed1524a3347 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.html
@@ -93,11 +93,13 @@
                     [options]="zone.data.available"
                     (selection)="zoneSelection()">
   </cd-select-badges>
-  <i *ngIf="zone.data.selected.length <= 0"
-     i18n-title
-     title="Flow should be associated with {{name?.split('_').join(' ')}}"
-     class="{{ icons.warning }} icon-warning-color">
-  </i>
+
+  <svg *ngIf="zone.data.selected.length <= 0"
+       [cdsIcon]="icons.warning"
+       [size]="icons.size16"
+       title="Flow should be associated with {{name?.split('_').join(' ')}}"
+       class="cds-warning-color"
+       i18n-title></svg>
   <span class="invalid-feedback"
         *ngIf="currentFormGroupContext.showError(name, frm, 'required')"
         i18n>{{name?.split('_').join(' ')}} selection is required!
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.html
index 767305958d4c..6ed0da15f3f3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.html
@@ -109,11 +109,13 @@
                     [options]="zone.data.available"
                     (selection)="onZoneSelection(name)">
   </cd-select-badges>
-  <i *ngIf="zone.data.selected.length <= 0"
-     i18n-title
-     title="Pipe should be associated with {{ name?.split('_').join(' ') }}"
-     class="{{ icons.warning }} icon-warning-color">
-  </i>
+
+  <svg *ngIf="zone.data.selected.length <= 0"
+       i18n-title
+       [cdsIcon]="icons.warning"
+       [size]="icons.size16"
+       title="Pipe should be associated with {{ name?.split('_').join(' ') }}"
+       class="cds-warning-color"></svg>
   <span class="invalid-feedback"
         *ngIf="pipeForm.showError(name, frm, 'required')"
         i18n>{{ name?.split('_').join(' ') }} selection is required!
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-zonegroup-form/rgw-multisite-zonegroup-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-zonegroup-form/rgw-multisite-zonegroup-form.component.html
index 196426bc5b60..7a64e31d36d4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-zonegroup-form/rgw-multisite-zonegroup-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-zonegroup-form/rgw-multisite-zonegroup-form.component.html
@@ -190,7 +190,10 @@
                 id="add-plc"
                 class="btn btn-light float-end my-3"
                 (click)="addPlacementTarget()">
-          <i [ngClass]="[icons.add]"></i>
+          <svg [cdsIcon]="icons.add"
+               [size]="icons.size16"
+               class="cds-info-color">
+          </svg>
           <ng-container i18n>Add placement target</ng-container>
         </button>
       </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html
index 970a4d90a403..cbf9b033792a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html
@@ -17,8 +17,9 @@
     </ng-template>
     <li><b>Status:</b></li>
     <li *ngIf="zone.syncstatus?.includes('failed') || zone.syncstatus?.includes('error'); else showStatus">
-      <i  [ngClass]="[icons.danger]"
-          class="text-danger"></i>
+      <svg  [cdsIcon]="icons.danger"
+            [size]="icons.size16"
+            class="cds-danger-color"></svg>
       <a  class="lead text-danger"
           i18n>Error</a>
     </li>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html
index 5ec927071f8b..211def32cabf 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html
@@ -25,8 +25,9 @@
         </ng-template>
         <li><b i18n>Status:</b></li>
         <li *ngIf="metadataSyncInfo.syncstatus?.includes('failed') || metadataSyncInfo.syncstatus?.includes('error'); else showMetadataStatus">
-          <i  class="text-danger"
-              [ngClass]="[icons.danger]"></i>
+          <svg  [cdsIcon]="icons.danger"
+                [size]="icons.size16"
+                class="cds-danger-color"></svg>
           <a class="lead text-danger"
              i18n>Error</a>
         </li>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html
index f0e0457d944d..fe6e074b72df 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html
@@ -1,15 +1,27 @@
 <ul class="pb-5">
-  <li><i [ngClass]="[icons.large2x, icons.reweight]"
-         class="pt-2"></i></li>
+  <li>
+    <svg [cdsIcon]="icons.reweight"
+         [size]="icons.size20"
+         class="cds-icon--size-07"></svg>
+  </li>
   <li class="badge badge-info mt-2">{{realm}}</li>
-  <li><i [ngClass]="[icons.large2x, icons.down]"
-         class="mt-2"></i></li>
-  <li><i [ngClass]="[icons.large2x, icons.cubes]"
-         class="mt-2"></i></li>
+  <li>
+    <svg [cdsIcon]="icons.down"
+         class=" cds-icon--size-07"></svg>
+  </li>
+  <li>
+    <i [ngClass]="[icons.large2x, icons.cubes]"
+       class="mt-2"></i>
+  </li>
   <p class="badge badge-info mt-2">{{zonegroup}}</p>
-  <li><i [ngClass]="[icons.large2x, icons.down]"
-         class="mt-2"></i></li>
-  <li><i [ngClass]="[icons.large2x, icons.deploy]"
-         class="mt-2"></i></li>
+  <li>
+    <svg [cdsIcon]="icons.down"
+         class="cds-icon--size-07"></svg>
+  </li>
+  <li>
+    <svg [cdsIcon]="icons.deploy"
+         [size]="icons.size20"
+         class="cds-icon--size-07 cds-icon"></svg>
+  </li>
   <li class="badge badge-info mt-2">{{zone}}</li>
 </ul>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
index 58a6fee7eedd..c38780ee32d5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
@@ -306,8 +306,8 @@
                          title="Edit"
                          class="mt-4 tc_showSubuserButton"
                          (click)="showSubuserModal(i)">
-          <svg cdsIcon="edit"
-               size="32"
+          <svg [cdsIcon]="icons.edit"
+               [size]="icons.size32"
                class="cds--btn__icon"></svg>
         </cds-icon-button>
         <cds-icon-button kind="danger"
@@ -315,9 +315,9 @@
                          title="Delete"
                          class="mt-4 tc_deleteSubuserButton"
                          (click)="deleteSubuser(i)">
-          <svg cdsIcon="trash-can"
-               size="32"
-               class="cds--btn__icon"></svg>
+          <svg [cdsIcon]="icons.trash"
+               [size]="icons.size32"
+               class="cds--btn__icon">></svg>
         </cds-icon-button>
         </div>
       </ng-container>
@@ -330,8 +330,8 @@
                   (click)="showSubuserModal()">
             <ng-container i18n>{{ actionLabels.CREATE | titlecase }}
               {{ subuserLabel | upperFirst }}</ng-container>
-            <svg cdsIcon="add"
-                 size="32"
+            <svg [cdsIcon]="icons.add"
+                 [size]="icons.size32"
                  class="cds--btn__icon"></svg>
           </button>
         </div>
@@ -366,10 +366,11 @@
             <cds-icon-button kind="tertiary"
                              size="md"
                              title="Show"
+                             i18n-title
                              class="mt-2 tc_showS3KeyButton"
                              (click)="showS3KeyModal(i)">
-              <svg cdsIcon="view"
-                   size="16"
+              <svg [cdsIcon]="icons.edit"
+                   [size]="icons.size16"
                    class="cds--btn__icon"></svg>
             </cds-icon-button>
             <cds-icon-button kind="danger"
@@ -377,8 +378,8 @@
                              title="Delete"
                              class="mt-2 tc_deleteS3KeyButton"
                              (click)="deleteS3Key(i)">
-              <svg cdsIcon="trash-can"
-                   size="32"
+              <svg [cdsIcon]="icons.trash"
+                   [size]="icons.size32"
                    class="cds--btn__icon"></svg>
             </cds-icon-button>
           </div>
@@ -394,8 +395,8 @@
                     (click)="showS3KeyModal()">
               <ng-container i18n>{{ actionLabels.CREATE | titlecase }}
                 {{ s3keyLabel | upperFirst }}</ng-container>
-              <svg cdsIcon="add"
-                   size="32"
+              <svg [cdsIcon]="icons.add"
+                   [size]="icons.size32"
                    class="cds--btn__icon"></svg>
             </button>
           </div>
@@ -424,15 +425,17 @@
                        readonly>
               </cds-text-label>
             </div>
-            <cds-icon-button kind="tertiary"
-                             size="md"
-                             title="Show"
-                             class="mt-2 tc_showSwiftKeyButton"
-                             (click)="showSwiftKeyModal(i)">
-              <svg cdsIcon="view"
-                   size="16"
-                   class="cds--btn__icon"></svg>
-            </cds-icon-button>
+          <cds-icon-button kind="tertiary"
+                           size="md"
+                           title="Show"
+                           i18n-title
+                           class="mt-2 tc_showSwiftKeyButton"
+                           (click)="showSwiftKeyModal(i)">
+            <svg [cdsIcon]="icons.show"
+                 [size]="icons.size16"
+                 class="cds--btn__icon">
+            </svg>
+          </cds-icon-button>
           </div>
         </span>
       </div>
@@ -473,8 +476,8 @@
                              title="Edit"
                              class="mt-4 tc_editCapButton"
                              (click)="showCapabilityModal(i)">
-              <svg cdsIcon="edit"
-                   size="32"
+              <svg [cdsIcon]="icons.edit"
+                   [size]="icons.size16"
                    class="cds--btn__icon"></svg>
             </cds-icon-button>
             <cds-icon-button kind="danger"
@@ -482,8 +485,8 @@
                              title="Delete"
                              class="mt-4 tc_deleteCapButton"
                              (click)="deleteCapability(i)">
-              <svg cdsIcon="trash-can"
-                   size="32"
+              <svg [cdsIcon]="icons.trash"
+                   [size]="icons.size32"
                    class="cds--btn__icon"></svg>
             </cds-icon-button>
           </div>
@@ -504,8 +507,8 @@
                     (click)="showCapabilityModal()">
               <ng-container i18n>{{ actionLabels.ADD | titlecase }}
                 {{ capabilityLabel | upperFirst }}</ng-container>
-              <svg cdsIcon="add"
-                   size="32"
+              <svg [cdsIcon]="icons.add"
+                   [size]="icons.size32"
                    class="cds--btn__icon"></svg>
             </button>
           </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
index 83a0414b000b..e6e09e4c08fe 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
@@ -83,8 +83,21 @@ import {
   TagModule,
   TooltipModule,
   ComboBoxModule,
-  ToggletipModule
+  ToggletipModule,
+  IconService
 } from 'carbon-components-angular';
+import EditIcon from '@carbon/icons/es/edit/16';
+import ScalesIcon from '@carbon/icons/es/scales/20';
+import UserIcon from '@carbon/icons/es/user/16';
+import CubeIcon from '@carbon/icons/es/cube/20';
+import ShareIcon from '@carbon/icons/es/share/16';
+import ViewIcon from '@carbon/icons/es/view/16';
+import PasswordIcon from '@carbon/icons/es/password/16';
+import ArrowDownIcon from '@carbon/icons/es/arrow--down/16';
+import ProgressBarRoundIcon from '@carbon/icons/es/progress-bar--round/32';
+import ToolsIcon from '@carbon/icons/es/tools/32';
+import ParentChild from '@carbon/icons/es/parent-child/20';
+
 import { CephSharedModule } from '../shared/ceph-shared.module';
 import { RgwUserAccountsComponent } from './rgw-user-accounts/rgw-user-accounts.component';
 import { RgwUserAccountsFormComponent } from './rgw-user-accounts-form/rgw-user-accounts-form.component';
@@ -201,7 +214,23 @@ import { RgwTopicDetailsComponent } from './rgw-topic-details/rgw-topic-details.
   ],
   providers: [TitleCasePipe]
 })
-export class RgwModule {}
+export class RgwModule {
+  constructor(private iconService: IconService) {
+    this.iconService.registerAll([
+      EditIcon,
+      ScalesIcon,
+      CubeIcon,
+      UserIcon,
+      ShareIcon,
+      ViewIcon,
+      PasswordIcon,
+      ArrowDownIcon,
+      ProgressBarRoundIcon,
+      ToolsIcon,
+      ParentChild
+    ]);
+  }
+}
 
 const routes: Routes = [
   {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.html
index d82e122ff0ea..06881a861a29 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.html
@@ -6,9 +6,8 @@
   <div class="row h-100 justify-content-center align-items-center">
     <div class="blank-page">
       <div *ngIf="header && message; else elseBlock">
-        <i [ngClass]="icon"
-           class="mx-auto d-block"></i>
-
+        <svg [cdsIcon]="icon"
+             class="cds-info-color cds-icon--size-10"></svg>
         <div class="mt-4 text-center">
           <h3><b>{{ header }}</b></h3>
           <h4 class="mt-3"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.ts
index 4ade21c832dd..d63264f2a2fd 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.ts
@@ -9,6 +9,7 @@ import { MgrModuleService } from '~/app/shared/api/mgr-module.service';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { DocService } from '~/app/shared/services/doc.service';
 import { NotificationService } from '~/app/shared/services/notification.service';
+import { Icons } from '~/app/shared/enum/icons.enum';
 
 @Component({
   selector: 'cd-error',
@@ -35,6 +36,7 @@ export class ErrorComponent implements OnDestroy, OnInit {
   buttonToEnableModule: string;
   navigateTo: string;
   component: string;
+  icons = Icons;
 
   constructor(
     private router: Router,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html
index 60c0af60306d..5732c38d204a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html
@@ -6,7 +6,9 @@
   </h4>
   <h4 *ngIf="cardType === 'zone'"
       class="text-center mt-4 mb-0">
-    <i [ngClass]="icons.deploy"></i>
+    <svg [cdsIcon]="icons.deploy"
+         [size]="icons.size20"
+         ></svg>
     <span class="badge badge-info">{{ cardTitle }}</span>
   </h4>
   <h5 *ngIf="cardType === 'syncCards'"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index fbd9d265d6b4..80ae2e7d8211 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -38,7 +38,8 @@ import {
   ProgressIndicatorModule,
   PanelModule
 } from 'carbon-components-angular';
-
+import EditIcon from '@carbon/icons/es/edit/20';
+import CodeIcon from '@carbon/icons/es/code/16';
 import { MotdComponent } from '~/app/shared/components/motd/motd.component';
 import { DirectivesModule } from '../directives/directives.module';
 import { PipesModule } from '../pipes/pipes.module';
@@ -86,6 +87,7 @@ import { SidePanelComponent } from './side-panel/side-panel.component';
 // Icons
 import InfoIcon from '@carbon/icons/es/information/16';
 import CopyIcon from '@carbon/icons/es/copy/32';
+import downloadIcon from '@carbon/icons/es/download/16';
 
 @NgModule({
   imports: [
@@ -213,6 +215,6 @@ import CopyIcon from '@carbon/icons/es/copy/32';
 })
 export class ComponentsModule {
   constructor(private iconService: IconService) {
-    this.iconService.registerAll([InfoIcon, CopyIcon]);
+    this.iconService.registerAll([InfoIcon, CopyIcon, EditIcon, CodeIcon, downloadIcon]);
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html
index 8581a51109ac..f91ff8eafd6b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html
@@ -1,8 +1,11 @@
-<i [ngClass]="[icons.clipboard, icons.large]"
-   (click)="onClick()"
-   class="text-primary ms-2"
-   title="Copy to Clipboard"
-   *ngIf="showIconOnly; else withButtonTpl"></i>
+
+<svg [cdsIcon]="icons.clipboard"
+     [size]="icons.size16"
+     (click)="onClick()"
+     class="text-primary ms-2"
+     title="Copy to Clipboard"
+     i18n-title
+     *ngIf="showIconOnly; else withButtonTpl"></svg>
 
 <ng-template #withButtonTpl>
 
@@ -10,8 +13,8 @@
                    size="md"
                    title="Copy to Clipboard"
                    (click)="onClick()">
-    <svg cdsIcon="copy"
-         size="32"
+    <svg [cdsIcon]="icons.copy"
+         [size]="icons.size16"
          class="cds--btn__icon"></svg>
   </cds-icon-button>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/download-button/download-button.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/download-button/download-button.component.html
index a7e476501894..43c1d2d6542b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/download-button/download-button.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/download-button/download-button.component.html
@@ -4,20 +4,26 @@
           [title]="title"
           class="btn btn-light dropdown-toggle-split"
           ngbDropdownToggle>
-    <i [ngClass]="[icons.download]"></i>
+    <svg [cdsIcon]="icons.download"
+         size="16"
+         ></svg>&nbsp;
   </button>
   <div ngbDropdownMenu>
     <button ngbDropdownItem
             (click)="download('json')"
             *ngIf="objectItem">
-      <i [ngClass]="[icons.json]"></i>
-      <span>JSON</span>
+      <svg [cdsIcon]="icons.code"
+           size="16"
+           ></svg>
+      <span>&nbsp;JSON</span>
     </button>
     <button ngbDropdownItem
             (click)="download()"
             *ngIf="textItem">
-      <i [ngClass]="[icons.text]"></i>
-      <span>Text</span>
+      <svg [cdsIcon]="icons.document"
+           size="16"
+           ></svg>
+      <span>&nbsp;Text</span>
     </button>
   </div>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
index 653b50fa92bf..ba3a57eb1d9f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
@@ -4,23 +4,21 @@
     <div class="card tc_task border-0">
       <div class="row no-gutters">
         <div class="col-md-2 text-center">
-          <span [ngClass]="[icons.stack, icons.large2x]"
-                class="text-info">
-            <i [ngClass]="[icons.stack2x, icons.circle]"></i>
-            <i [ngClass]="[icons.stack1x, icons.spinner, icons.spin, icons.inverse]"></i>
+          <span class="text-info">
+            <svg [cdsIcon]="icons.circle"
+                 [size]="icons.size16"
+                 ></svg>
           </span>
         </div>
         <div class="col-md-9">
           <div class="card-body p-1">
             <h6 class="card-title bold">{{ executingTask.description }}</h6>
-
             <div class="mb-1">
               <ngb-progressbar type="info"
                                [value]="executingTask?.progress"
                                [striped]="true"
                                [animated]="true"></ngb-progressbar>
             </div>
-
             <p class="card-text text-muted">
               <small class="date float-start">
                 {{ executingTask.begin_time | cdDate }}
@@ -45,8 +43,9 @@
     <button type="button"
             class="btn btn-light btn-block"
             (click)="removeAll(); $event.stopPropagation()">
-      <i [ngClass]="[icons.trash]"
-         aria-hidden="true"></i>
+      <svg [cdsIcon]="icons.trash"
+           [size]="icons.size16"
+           ></svg>
       &nbsp;
       <ng-container i18n>Clear notifications</ng-container>
     </button>
@@ -69,21 +68,27 @@
                       title="Remove notification"
                       i18n-title
                       (click)="remove(i); $event.stopPropagation()">
-                <i [ngClass]="[icons.trash]"></i>
+                <svg [cdsIcon]="icons.trash"
+                     [size]="icons.size16"
+                     ></svg>
               </button>
               <button *ngIf="notification.application === 'Prometheus' && notification.type !== 2 && !notification.alertSilenced"
                       class="btn btn-link float-end text-muted mute m-0 p-0"
                       title="Silence Alert"
                       i18n-title
                       (click)="silence(notification)">
-                <i [ngClass]="[icons.mute]"></i>
+                <svg [cdsIcon]="icons.mute"
+                     [size]="icons.size16"
+                     ></svg>
               </button>
               <button *ngIf="notification.application === 'Prometheus' && notification.type !== 2 && notification.alertSilenced"
                       class="btn btn-link float-end text-muted mute m-0 p-0"
                       title="Expire Silence"
                       i18n-title
                       (click)="expire(notification)">
-                <i [ngClass]="[icons.bell]"></i>
+                <svg [cdsIcon]="icons.bell"
+                     [size]="icons.size16"
+                     ></svg>
               </button>
 
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html
index 5351000836f7..331b3004040c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html
@@ -7,16 +7,19 @@
            [customBadgeValidators]="customBadgeValidators"
            elemClass="me-2 select-menu-edit"
            (selection)="selection.emit($event)">
-  <i [ngClass]="[icons.edit]"></i>
+  <svg [cdsIcon]="icons.edit"
+       [size]="icons.size20"
+       class="cds-info-color"></svg>
 </cd-select>
 
 <span *ngFor="let dataItem of data">
   <span class="badge badge-dark me-2">
     <span class="me-2">{{ dataItem }}</span>
-    <a class="badge-remove"
-       (click)="cdSelect.removeItem(dataItem)">
-      <i [ngClass]="[icons.destroy]"
-         aria-hidden="true"></i>
+      <a  class="badge-remove"
+          (click)="cdSelect.removeItem(dataItem)">
+      <svg [cdsIcon]="icons.destroy"
+           [size]="icons.size20"
+           class="cds-white"></svg>
     </a>
   </span>
 </span>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
index 41318cbc8989..0e3f73a0c3e5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
@@ -20,9 +20,9 @@
             [offset]="{ x: -210, y: 65 }"
             [cdsOverflowMenu]="overflowMenuTpl"
             data-testid="table-action-btn">
-      <svg class="cds--btn__icon"
-           cdsIcon="caret--down"
-           size="16"></svg>
+      <svg
+           [cdsIcon]="icons.downArrow"
+           [size]="icons.size16"></svg>
     </button>
     <ng-template #overflowMenuTpl>
       <ng-container *ngFor="let action of dropDownActions">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 971bd96a4abf..da5a96d3a6b6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -49,9 +49,8 @@
       <!-- column filters -->
       <ng-container *ngIf="columnFilters.length !== 0">
         <div class="d-inline-flex position-relative">
-          <svg cdsIcon="filter"
-               size="16"
-               class="align-self-center mb-2"></svg>
+        <svg [cdsIcon]="icons.filter"
+             [size]="icons.size16"></svg>
         </div>
         <cds-select (valueChange)="onSelectFilter($event)"
                     display="inline"
@@ -85,8 +84,8 @@
               class="toolbar-action"
               placement="bottom"
               *ngIf="fetchData?.observers?.length > 0">
-        <svg cdsIcon="renew"
-             size="16"
+        <svg [cdsIcon]="icons.refresh"
+             [size]="icons.size16"
              [ngClass]="{ 'cds--toolbar-action__icon': true, 'reload': loadingIndicator }"></svg>
       </cds-icon-button>
       <!-- end refresh button -->
@@ -97,8 +96,8 @@
               placement="bottom"
               [flip]="true"
               [offset]="{ x: 3, y: 0 }">
-        <svg cdsIcon="data-table"
-             size="16"
+        <svg [cdsIcon]="icons.dataTable"
+             [size]="icons.size16"
              class="cds--toolbar-action__icon"></svg>
       </button>
       <ng-template #showHideColumnsRef>
@@ -132,8 +131,8 @@
         <span class="me-2">{{ filter.column.name }}: {{ filter.value.formatted }}</span>
         <button class="cds--tag__close-icon"
                 (click)="onChangeFilter(filter)">
-          <svg cdsIcon="close"
-               size="16"></svg>
+          <svg [cdsIcon]="icons.destroy"
+               [size]="icons.size16"></svg>
         </button>
       </cds-tag>
     </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
index 74a474730d63..81f5e68ae3bc 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
@@ -1,80 +1,76 @@
 export enum Icons {
   /* Icons for Symbol */
-  add = 'fa fa-plus', // Create, Add
-  addCircle = 'fa fa-plus-circle', // Plus with Circle
-  minusCircle = 'fa fa-minus-circle', // Minus with Circle
-  edit = 'fa fa-pencil', // Edit, Edit Mode, Rename
-  destroy = 'fa fa-times', // Destroy, Remove, Delete
-  destroyCircle = 'fa fa-times-circle', // Destroy, Remove, Delete
-  exchange = 'fa fa-exchange', // Edit-Peer
-  copy = 'fa fa-copy', // Copy
-  clipboard = 'fa fa-clipboard', // Clipboard
-  flatten = 'fa fa-chain-broken', // Flatten, Link broken, Mark Lost
-  trash = 'fa fa-trash-o', // Move to trash
-  lock = 'fa fa-lock', // Protect
-  unlock = 'fa fa-unlock', // Unprotect
+  add = 'add', // Create, Add
+  addCircle = 'add--filled', // Plus with Circle
+  minusCircle = 'subtract--alt', // Minus with Circle
+  edit = 'edit', // Edit, Edit Mode, Rename
+  destroy = 'close', // Destroy, Remove, Delete
+  exchange = 'arrows--horizontal', // Edit-Peer
+  copy = 'copy', // Copy
+  clipboard = 'copy--file', // Clipboard
+  flatten = 'unlink', // Flatten, Link broken, Mark Lost
+  trash = 'trash-can', // Move to trash
+  lock = 'locked', // Protect
+  unlock = 'unlocked', // Unprotect
   clone = 'fa fa-clone', // clone
   undo = 'fa fa-undo', // Rollback, Restore
-  search = 'fa fa-search', // Search
+  search = 'search', // Search
   start = 'fa fa-play', // Enable
   stop = 'fa fa-stop', // Disable
   analyse = 'fa fa-stethoscope', // Scrub
-  deepCheck = 'fa fa-cog', // Deep Scrub, Setting, Configuration
+  deepCheck = 'settings', // Deep Scrub, Setting, Configuration
   cogs = 'fa fa-cogs', // Multiple Settings, Configurations
-  reweight = 'fa fa-balance-scale', // Reweight
-  up = 'fa fa-arrow-up', // Up
-  left = 'fa fa-arrow-left', // Mark out
-  right = 'fa fa-arrow-right', // Mark in
-  down = 'fa fa-arrow-down', // Mark Down
+  reweight = 'scales', // Reweight
+  up = 'arrow--up', // Up
+  left = 'arrow--left', // Mark out
+  right = 'arrow--right', // Mark in
+  down = 'arrow--down', // Mark Down
   erase = 'fa fa-eraser', // Purge  color: bd.$white;
   expand = 'maximize', // Expand cluster
-  user = 'fa fa-user', // User, Initiators
-  users = 'fa fa-users', // Users, Groups
-  share = 'fa fa-share-alt', // share
-  key = 'fa fa-key-modern', // S3 Keys, Swift Keys, Authentication
-  warning = 'fa fa-exclamation-triangle', // Notification warning
-  info = 'fa fa-info', // Notification information
-  infoCircle = 'fa fa-info-circle', // Info on landing page
-  questionCircle = 'fa fa-question-circle-o',
-  danger = 'fa fa-exclamation-circle',
-  success = 'fa fa-check-circle',
-  check = 'fa fa-check', // Notification check
-  show = 'fa fa-eye', // Show
+  user = 'user', // User, Initiators
+  users = 'user--multiple', // Users, Groups
+  share = 'share', // share
+  key = 'password', // S3 Keys, Swift Keys, Authentication
+  warning = 'warning--alt--filled', // Notification warning
+  info = 'information', // Notification information
+  infoCircle = 'information--filled', // Info on landing page
+  questionCircle = 'help',
+  danger = 'warning--filled',
+  // success = 'fa fa-check-circle',
+  success = 'checkmark--filled',
+  check = 'checkmark', // Notification check
+  show = 'view', // Show
   paragraph = 'fa fa-paragraph', // Silence Matcher - Attribute name
   terminal = 'fa fa-terminal', // Silence Matcher - Value
   magic = 'fa fa-magic', // Silence Matcher - Regex checkbox
   hourglass = 'fa fa-hourglass-o', // Task
   filledHourglass = 'fa fa-hourglass', // Task
   table = 'fa fa-table', // Table,
-  spinner = 'fa fa-spinner', // spinner, Load
-  refresh = 'fa fa-refresh', // Refresh
+  spinner = 'fa fa-spinner',
+  refresh = 'renew', // Refresh
   bullseye = 'fa fa-bullseye', // Target
   disk = 'fa fa-hdd-o', // Hard disk, disks
   server = 'fa fa-server', // Server, Portal
-  filter = 'fa fa-filter', // Filter
-  lineChart = 'fa fa-line-chart', // Line chart
+  filter = 'filter', // Filter
+  lineChart = 'analytics', // Line chart
   signOut = 'fa fa-sign-out', // Sign Out
-  health = 'fa fa-heartbeat', // Health
-  circle = 'fa fa-circle', // Circle
-  bell = 'fa fa-bell', // Notification
-  mute = 'fa fa-bell-slash', // Mute or silence
-  tag = 'fa fa-tag', // Tag, Badge
-  leftArrow = 'fa fa-angle-left', // Left facing angle
-  rightArrow = 'fa fa-angle-right', // Right facing angle
-  leftArrowDouble = 'fa fa-angle-double-left', // Left facing Double angle
-  rightArrowDouble = 'fa fa-angle-double-right', // Left facing Double angle
+  circle = 'dot-mark', // Circle
+  bell = 'notification', // Notification
+  mute = 'notification--off', // Mute or silence
+  leftArrow = 'caret--left', // Left facing angle
+  rightArrow = 'caret--right', // Right facing angle
+  downArrow = 'caret--down',
   flag = 'fa fa-flag', // OSD configuration
-  clearFilters = 'fa fa-window-close', // Clear filters, solid x
-  download = 'fa fa-download', // Download
+  clearFilters = 'close--filled', // Clear filters, solid x
+  download = 'download', // Download
   upload = 'fa fa-upload', // Upload
-  close = 'fa fa-times', // Close
-  json = 'fa fa-file-code-o', // JSON file
-  text = 'fa fa-file-text', // Text file
-  wrench = 'fa fa-wrench', // Configuration Error
+  code = 'code', // JSON file
+  document = 'document', // Text file
+  wrench = 'tools', // Configuration Error
   enter = 'fa fa-sign-in', // Enter
   exit = 'fa fa-sign-out', // Exit
   restart = 'fa fa-history', // Restart
-  deploy = 'fa fa-cube', // Deploy, Redeploy
+  deploy = 'cube', // Deploy, Redeploy
   cubes = 'fa fa-cubes', // Object storage
   sitemap = 'fa fa-sitemap', // Cluster, network, connections
   database = 'fa fa-database', // Database, Block storage
@@ -85,8 +81,14 @@ export enum Icons {
   calendar = 'fa fa-calendar',
   externalUrl = 'fa fa-external-link', // links to external page
   nfsExport = 'fa fa-server', // NFS export
-
+  launch = 'launch',
+  parentChild = 'parent-child',
+  dataTable = 'data-table',
   /* Icons for special effect */
+  size16 = '16',
+  size20 = '20',
+  size24 = '24',
+  size32 = '32',
   large = 'fa fa-lg', // icon becomes 33% larger
   large2x = 'fa fa-2x', // icon becomes 50% larger
   large3x = 'fa fa-3x', // icon becomes 3 times larger
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.spec.ts
index df6e8899bf8b..459677e9d8fd 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.spec.ts
@@ -50,7 +50,7 @@ describe('cd-notification classes', () => {
       expectObject(new CdNotification(), {
         application: 'Ceph',
         applicationClass: 'ceph-icon',
-        iconClass: 'fa fa-info',
+        iconClass: 'information',
         message: undefined,
         options: undefined,
         textClass: 'text-info',
@@ -74,7 +74,7 @@ describe('cd-notification classes', () => {
         {
           application: 'Prometheus',
           applicationClass: 'prometheus-icon',
-          iconClass: 'fa fa-exclamation-triangle',
+          iconClass: 'warning--alt--filled',
           message: 'Something failed',
           options: undefined,
           textClass: 'text-danger',
@@ -87,7 +87,7 @@ describe('cd-notification classes', () => {
 
     it('should expect the right success classes', () => {
       expectObject(new CdNotification(new CdNotificationConfig(NotificationType.success)), {
-        iconClass: 'fa fa-check',
+        iconClass: 'checkmark',
         textClass: 'text-success'
       });
     });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/prometheus-alert-formatter.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/prometheus-alert-formatter.spec.ts
index 1384637bbd8b..45f90645ca4c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/prometheus-alert-formatter.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/prometheus-alert-formatter.spec.ts
@@ -86,7 +86,7 @@ describe('PrometheusAlertFormatter', () => {
         NotificationType.error,
         'Some alert (active)',
         'Some alert is active <a href="http://some-alert" target="_blank">' +
-          '<i class="fa fa-line-chart"></i></a>',
+          '<svg cdsIcon="analytics" size="16" ></svg></a>',
         undefined,
         'Prometheus'
       )
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/prometheus-alert-formatter.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/prometheus-alert-formatter.ts
index 96ad5f96f71b..1b28078b9ca9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/prometheus-alert-formatter.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/prometheus-alert-formatter.ts
@@ -69,6 +69,6 @@ export class PrometheusAlertFormatter {
   }
 
   private appendSourceLink(alert: PrometheusCustomAlert, message: string): string {
-    return `${message} <a href="${alert.url}" target="_blank"><i class="${Icons.lineChart}"></i></a>`;
+    return `${message} <a href="${alert.url}" target="_blank"><svg cdsIcon="${Icons.lineChart}" size="${Icons.size16}" ></svg></a>`;
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
index 6a474f4948d8..26b06564bd7a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
@@ -149,6 +149,7 @@ cd-dashboard {
 /******************************************
 Code snippet
 ******************************************/
+
 .cds--snippet {
   width: fit-content;
 }
@@ -175,3 +176,39 @@ Tabs
 .cds--tab-content {
   background: var(--cds-layer-01);
 }
+
+.cds-success-color {
+  fill: theme.$support-success;
+}
+
+.cds-danger-color {
+  fill: theme.$support-error;
+}
+
+.cds-info-color {
+  fill: theme.$support-info;
+}
+
+.cds-warning-color {
+  fill: theme.$support-caution-major;
+}
+
+.cds-white {
+  fill: theme.$icon-on-color;
+}
+
+.cds-icon--size-07 {
+  height: layout.$spacing-07;
+  width: layout.$spacing-07;
+}
+
+.cds-icon--size-10 {
+  display: block;
+  height: layout.$spacing-10;
+  margin: auto;
+  width: layout.$spacing-10;
+}
+
+.cds-mb-4 {
+  margin-bottom: layout.$spacing-02;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts b/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts
index fabbe22c7b94..4ce471756ac2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts
@@ -346,7 +346,7 @@ export class PrometheusHelper {
   }
 
   createLink(url: string) {
-    return `<a href="${url}" target="_blank"><i class="${Icons.lineChart}"></i></a>`;
+    return `<a href="${url}" target="_blank"><svg cdsIcon="${Icons.lineChart}" size="${Icons.size16}" ></svg></a>`;
   }
 }
 
-- 
2.47.3