diff --git a/docs/en/UI/Angular/Confirmation-Service.md b/docs/en/UI/Angular/Confirmation-Service.md
index 78c78eb2d6..e2bd1107e3 100644
--- a/docs/en/UI/Angular/Confirmation-Service.md
+++ b/docs/en/UI/Angular/Confirmation-Service.md
@@ -131,6 +131,25 @@ The open confirmation popup can be removed manually via the `clear` method:
 this.confirmation.clear();
 ```
 
+### How to Change Icons of The Confirmation Popup
+
+You can change icons with the token of "confirmationIcons" in ThemeSharedModule in the app.module.ts. The changes will affect  all confirmation popup in the project.
+
+```js
+...
+ThemeSharedModule.forRoot({
+  confirmationIcons: {
+    info: 'fa fa-info-circle',
+    success: 'fa fa-check-circle',
+    warning: 'fa fa-exclamation-triangle',
+    error: 'fa fa-times-circle',
+    default: 'fa fa-question-circle',
+  },
+}),
+...
+```
+
+
 ## API
 
 ### success
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
index fcaec92d1f..53e09d9788 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { Confirmation } from '../../models/confirmation';
-import { ConfirmationIcons } from '../../tokens/confirmation-icons.token';
+import { CONFIRMATION_ICONS, ConfirmationIcons } from '../../tokens/confirmation-icons.token';
 
 @Component({
   selector: 'abp-confirmation',
@@ -9,12 +9,13 @@ import { ConfirmationIcons } from '../../tokens/confirmation-icons.token';
   styleUrls: ['./confirmation.component.scss'],
 })
 export class ConfirmationComponent {
+  constructor(@Inject(CONFIRMATION_ICONS) private icons: ConfirmationIcons) {}
+
   confirm = Confirmation.Status.confirm;
   reject = Confirmation.Status.reject;
   dismiss = Confirmation.Status.dismiss;
 
   confirmation$!: ReplaySubject<Confirmation.DialogData>;
-  icons: ConfirmationIcons;
 
   clear!: (status: Confirmation.Status) => void;
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts b/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts
index a4df438629..9ddbe0f5be 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts
@@ -5,7 +5,7 @@ import { Observable } from 'rxjs';
 import { ConfirmationIcons } from '../tokens/confirmation-icons.token';
 
 export interface RootParams {
-  httpErrorConfig: HttpErrorConfig;
+  httpErrorConfig?: HttpErrorConfig;
   validation?: Partial<Validation.Config>;
   confirmationIcons?: Partial<ConfirmationIcons>;
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
index 6e48843d33..02840743da 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
@@ -1,10 +1,9 @@
 import { ContentProjectionService, LocalizationParam, PROJECTION_STRATEGY } from '@abp/ng.core';
-import { ComponentRef, Inject, Injectable } from '@angular/core';
+import { ComponentRef, Injectable } from '@angular/core';
 import { fromEvent, Observable, ReplaySubject, Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import { ConfirmationComponent } from '../components/confirmation/confirmation.component';
 import { Confirmation } from '../models/confirmation';
-import { CONFIRMATION_ICONS, ConfirmationIcons } from '../tokens/confirmation-icons.token';
 
 @Injectable({ providedIn: 'root' })
 export class ConfirmationService {
@@ -18,17 +17,13 @@ export class ConfirmationService {
     this.status$.next(status);
   };
 
-  constructor(
-    private contentProjectionService: ContentProjectionService,
-    @Inject(CONFIRMATION_ICONS) private confirmationIcons: ConfirmationIcons,
-  ) {}
+  constructor(private contentProjectionService: ContentProjectionService) {}
 
   private setContainer() {
     this.containerComponentRef = this.contentProjectionService.projectContent(
       PROJECTION_STRATEGY.AppendComponentToBody(ConfirmationComponent, {
         confirmation$: this.confirmation$,
         clear: this.clear,
-        icons: this.confirmationIcons,
       }),
     );
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/confirmation.service.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/confirmation.service.spec.ts
index 98bb444c64..5674a501de 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/confirmation.service.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/confirmation.service.spec.ts
@@ -13,6 +13,7 @@ import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from '../tokens/confir
   entryComponents: [ConfirmationComponent],
   declarations: [ConfirmationComponent],
   imports: [CoreTestingModule.withConfig()],
+  providers: [{ provide: CONFIRMATION_ICONS, useValue: DEFAULT_CONFIRMATION_ICONS }],
 })
 export class MockModule {}
 
@@ -22,7 +23,6 @@ describe('ConfirmationService', () => {
   const createService = createServiceFactory({
     service: ConfirmationService,
     imports: [CoreTestingModule.withConfig(), MockModule],
-    providers: [{ provide: CONFIRMATION_ICONS, useValue: DEFAULT_CONFIRMATION_ICONS }],
   });
 
   beforeEach(() => {