Chore: ditch the abandoned ngx-bootstrap-icons, roll our own (#14665)

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.html

@@ -25,7 +25,7 @@
             <div class="btn-group d-block d-sm-none">
               <div ngbDropdown container="body" class="d-inline-block">
                 <button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
-                  <i-bs name="three-dots-vertical"></i-bs>
+                  <pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
                 </button>
                 <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
                   <button (click)="editField(field)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" ngbDropdownItem i18n>Edit</button>
@@ -44,10 +44,10 @@
             </div>
             <div class="btn-group d-none d-sm-inline-block">
               <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editField(field)">
-                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
+                <pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
               </button>
               <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteField(field)">
-                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
+                <pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
               </button>
             </div>
             @if (field.document_count > 0) {
@@ -56,7 +56,7 @@
                   class="btn btn-sm btn-outline-secondary"
                   [routerLink]="getDocumentFilterUrl(field)"
                 >
-                  <i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><ng-container i18n>Documents</ng-container
+                  <pngx-bs-icon width="1em" height="1em" name="filter" class="me-1"></pngx-bs-icon><ng-container i18n>Documents</ng-container
                   ><span class="badge bg-light text-secondary ms-2">{{ field.document_count }}</span>
                 </a>
               </div>

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.spec.ts

@@ -12,7 +12,6 @@ import {
   NgbPaginationModule,
   NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import {
@@ -61,7 +60,6 @@ describe('CustomFieldsComponent', () => {
         ReactiveFormsModule,
         NgbModalModule,
         NgbPopoverModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         RouterTestingModule,
         CustomFieldsComponent,
         IfPermissionsDirective,

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.ts

@@ -5,8 +5,8 @@ import {
   NgbModal,
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil, tap } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
 import { CustomFieldEditDialogComponent } from 'src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { EditDialogMode } from 'src/app/components/common/edit-dialog/edit-dialog.component'
@@ -34,7 +34,7 @@ import { ToastService } from 'src/app/services/toast.service'
     IfPermissionsDirective,
     NgbDropdownModule,
     NgbPaginationModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
     RouterModule,
   ],
 })

src-ui/src/app/components/manage/document-attributes/document-attributes.component.html

@@ -8,7 +8,7 @@
   @if (activeManagementList) {
     <div ngbDropdown class="btn-group flex-fill d-sm-none">
       <button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle aria-label="Select" i18n-aria-label>
-        <i-bs name="text-indent-left"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Select</ng-container></div>
+        <pngx-bs-icon name="text-indent-left"></pngx-bs-icon><div class="d-none d-sm-inline ms-1"><ng-container i18n>Select</ng-container></div>
         @if (activeManagementList.hasSelection) {
           <pngx-clearable-badge [selected]="activeManagementList.hasSelection" [number]="activeManagementList.selectedCount" (cleared)="activeManagementList.selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
         }
@@ -27,34 +27,34 @@
       <div class="btn-group btn-group-sm flex-nowrap">
         @if (activeManagementList.hasSelection) {
           <button class="btn btn-sm btn-outline-secondary" (click)="activeManagementList.selectNone()">
-            <i-bs name="slash-circle" class="me-1"></i-bs><ng-container i18n>None</ng-container>
+            <pngx-bs-icon name="slash-circle" class="me-1"></pngx-bs-icon><ng-container i18n>None</ng-container>
           </button>
         }
         <button class="btn btn-sm btn-outline-primary" (click)="activeManagementList.selectPage(true)">
-          <i-bs name="file-earmark-check" class="me-1"></i-bs><ng-container i18n>Page</ng-container>
+          <pngx-bs-icon name="file-earmark-check" class="me-1"></pngx-bs-icon><ng-container i18n>Page</ng-container>
         </button>
         <button class="btn btn-sm btn-outline-primary" (click)="activeManagementList.selectAll()">
-          <i-bs name="check-all" class="me-1"></i-bs><ng-container i18n>All</ng-container>
+          <pngx-bs-icon name="check-all" class="me-1"></pngx-bs-icon><ng-container i18n>All</ng-container>
         </button>
       </div>
     </div>
 
     <button type="button" class="btn btn-sm btn-outline-primary" (click)="activeManagementList.setPermissions()"
       [disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Change) || !activeManagementList.hasSelection">
-      <i-bs name="person-fill-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
+      <pngx-bs-icon name="person-fill-lock" class="me-1"></pngx-bs-icon><ng-container i18n>Permissions</ng-container>
     </button>
     <button type="button" class="btn btn-sm btn-outline-danger" (click)="activeManagementList.delete()"
       [disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Delete) || !activeManagementList.hasSelection">
-      <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
+      <pngx-bs-icon name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
     </button>
     <button type="button" class="btn btn-sm btn-outline-primary ms-md-5" (click)="activeManagementList.openCreateDialog()"
       *pngxIfPermissions="{ action: PermissionAction.Add, type: activeManagementList.permissionType }">
-      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Create</ng-container>
+      <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Create</ng-container>
     </button>
   } @else if (customFieldsActive) {
     <button type="button" class="btn btn-sm btn-outline-primary" (click)="addCustomField()"
       *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.CustomField }">
-      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Field</ng-container>
+      <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Field</ng-container>
     </button>
   }
 </pngx-page-header>
@@ -63,7 +63,7 @@
   @for (section of visibleSections; track section.id) {
     <li [ngbNavItem]="section.id">
       <a ngbNavLink >
-        <i-bs class="me-2" [name]="section.icon"></i-bs>{{ section.label }}
+        <pngx-bs-icon class="me-2" [name]="section.icon"></pngx-bs-icon>{{ section.label }}
       </a>
     </li>
   }

src-ui/src/app/components/manage/document-attributes/document-attributes.component.spec.ts

@@ -7,18 +7,17 @@ import {
   Router,
 } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
-import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject } from 'rxjs'
 import {
   PermissionAction,
   PermissionsService,
   PermissionType,
 } from 'src/app/services/permissions.service'
+import { CustomFieldsComponent } from './custom-fields/custom-fields.component'
 import {
   DocumentAttributesComponent,
   DocumentAttributesSectionKind,
 } from './document-attributes.component'
-import { CustomFieldsComponent } from './custom-fields/custom-fields.component'
 import { ManagementListComponent } from './management-list/management-list.component'
 
 @Component({
@@ -41,7 +40,6 @@ describe('DocumentAttributesComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         DocumentAttributesComponent,
         DummySectionComponent,
       ],

src-ui/src/app/components/manage/document-attributes/document-attributes.component.ts

@@ -14,8 +14,8 @@ import {
   NgbNavChangeEvent,
   NgbNavModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import {
   PermissionAction,
@@ -64,7 +64,7 @@ interface DocumentAttributesSection {
     NgbNavModule,
     NgbDropdownModule,
     NgComponentOutlet,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
     IfPermissionsDirective,
     ClearableBadgeComponent,
   ],

src-ui/src/app/components/manage/document-attributes/management-list/correspondent-list/correspondent-list.component.spec.ts

@@ -4,7 +4,6 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
@@ -23,7 +22,6 @@ describe('CorrespondentListComponent', () => {
         NgbPaginationModule,
         FormsModule,
         ReactiveFormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         CorrespondentListComponent,
         SortableDirective,
         PageHeaderComponent,

src-ui/src/app/components/manage/document-attributes/management-list/correspondent-list/correspondent-list.component.ts

@@ -6,7 +6,7 @@ import {
   NgbDropdownModule,
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { CorrespondentEditDialogComponent } from 'src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { Correspondent } from 'src/app/data/correspondent'
 import { FILTER_HAS_CORRESPONDENT_ANY } from 'src/app/data/filter-rule-type'
@@ -32,7 +32,7 @@ import { ManagementListComponent } from '../management-list.component'
     NgTemplateOutlet,
     NgbDropdownModule,
     NgbPaginationModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class CorrespondentListComponent extends ManagementListComponent<Correspondent> {

src-ui/src/app/components/manage/document-attributes/management-list/document-type-list/document-type-list.component.spec.ts

@@ -4,7 +4,6 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
@@ -23,7 +22,6 @@ describe('DocumentTypeListComponent', () => {
         NgbPaginationModule,
         FormsModule,
         ReactiveFormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         DocumentTypeListComponent,
         SortableDirective,
         PageHeaderComponent,

src-ui/src/app/components/manage/document-attributes/management-list/document-type-list/document-type-list.component.ts

@@ -6,7 +6,7 @@ import {
   NgbDropdownModule,
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { DocumentTypeEditDialogComponent } from 'src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
 import { DocumentType } from 'src/app/data/document-type'
 import { FILTER_HAS_DOCUMENT_TYPE_ANY } from 'src/app/data/filter-rule-type'
@@ -30,7 +30,7 @@ import { ManagementListComponent } from '../management-list.component'
     NgTemplateOutlet,
     NgbDropdownModule,
     NgbPaginationModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class DocumentTypeListComponent extends ManagementListComponent<DocumentType> {

src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.html

@@ -116,7 +116,7 @@
         <div class="btn-group d-block d-sm-none">
           <div ngbDropdown container="body" class="d-inline-block">
             <button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
-              <i-bs name="three-dots-vertical"></i-bs>
+              <pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
             </button>
             <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
               <button (click)="openEditDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" ngbDropdownItem i18n>Edit</button>
@@ -136,10 +136,10 @@
         </div>
         <div class="btn-group d-none d-sm-inline-block">
           <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
-            <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
+            <pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
           </button>
           <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)">
-            <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
+            <pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
           </button>
         </div>
         @if (getDocumentCount(object) > 0) {
@@ -150,7 +150,7 @@
               [routerLink]="getDocumentFilterUrl(object)"
               (click)="$event?.stopPropagation()"
             >
-              <i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><ng-container i18n>Documents</ng-container
+              <pngx-bs-icon width="1em" height="1em" name="filter" class="me-1"></pngx-bs-icon><ng-container i18n>Documents</ng-container
               ><span class="badge bg-light text-secondary ms-2">{{ getDocumentCount(object) }}</span>
             </a>
           </div>

src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.spec.ts

@@ -16,7 +16,6 @@ import {
   NgbModalRef,
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
@@ -86,7 +85,6 @@ describe('ManagementListComponent', () => {
         ReactiveFormsModule,
         NgbModalModule,
         RouterTestingModule.withRoutes(routes),
-        NgxBootstrapIconsModule.pick(allIcons),
         TagListComponent,
         SortableDirective,
         PageHeaderComponent,

src-ui/src/app/components/manage/document-attributes/management-list/storage-path-list/storage-path-list.component.spec.ts

@@ -4,7 +4,6 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { StoragePath } from 'src/app/data/storage-path'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -24,7 +23,6 @@ describe('StoragePathListComponent', () => {
         NgbPaginationModule,
         FormsModule,
         ReactiveFormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         StoragePathListComponent,
         SortableDirective,
         PageHeaderComponent,

src-ui/src/app/components/manage/document-attributes/management-list/storage-path-list/storage-path-list.component.ts

@@ -6,7 +6,7 @@ import {
   NgbDropdownModule,
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { StoragePathEditDialogComponent } from 'src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
 import { FILTER_HAS_STORAGE_PATH_ANY } from 'src/app/data/filter-rule-type'
 import { StoragePath } from 'src/app/data/storage-path'
@@ -30,7 +30,7 @@ import { ManagementListComponent } from '../management-list.component'
     NgTemplateOutlet,
     NgbDropdownModule,
     NgbPaginationModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class StoragePathListComponent extends ManagementListComponent<StoragePath> {

src-ui/src/app/components/manage/document-attributes/management-list/tag-list/tag-list.component.spec.ts

@@ -4,7 +4,6 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
@@ -24,7 +23,6 @@ describe('TagListComponent', () => {
         NgbPaginationModule,
         FormsModule,
         ReactiveFormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         TagListComponent,
         SortableDirective,
         PageHeaderComponent,

src-ui/src/app/components/manage/document-attributes/management-list/tag-list/tag-list.component.ts

@@ -6,7 +6,7 @@ import {
   NgbDropdownModule,
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { TagEditDialogComponent } from 'src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
 import { Tag } from 'src/app/data/tag'
@@ -30,7 +30,7 @@ import { ManagementListComponent } from '../management-list.component'
     NgTemplateOutlet,
     NgbDropdownModule,
     NgbPaginationModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class TagListComponent extends ManagementListComponent<Tag> {

src-ui/src/app/components/manage/mail/mail.component.html

@@ -11,16 +11,16 @@
   <h4>
     <ng-container i18n>Mail accounts</ng-container>
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailAccount()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
-      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Account</ng-container>
+      <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Account</ng-container>
     </button>
     @if (gmailOAuthUrl) {
       <a class="btn btn-sm btn-outline-secondary ms-2" [href]="gmailOAuthUrl" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
-        <i-bs name="google" class="me-1"></i-bs><ng-container i18n>Connect Gmail Account</ng-container>
+        <pngx-bs-icon name="google" class="me-1"></pngx-bs-icon><ng-container i18n>Connect Gmail Account</ng-container>
       </a>
     }
     @if (outlookOAuthUrl) {
       <a class="btn btn-sm btn-outline-secondary ms-2" [href]="outlookOAuthUrl" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
-        <i-bs name="microsoft" class="me-1"></i-bs><ng-container i18n>Connect Outlook Account</ng-container>
+        <pngx-bs-icon name="microsoft" class="me-1"></pngx-bs-icon><ng-container i18n>Connect Outlook Account</ng-container>
       </a>
     }
   </h4>
@@ -47,9 +47,9 @@
           <div class="col d-flex align-items-center">
             <button class="btn btn-link p-0 text-start" type="button" (click)="editMailAccount(account)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailAccount) || !userCanEdit(account)">
               {{account.name}}@switch (account.account_type) {
-                @case (MailAccountType.IMAP) {<i-bs name="envelope-at-fill" class="ms-2"></i-bs>}
-                @case (MailAccountType.Gmail_OAuth) {<i-bs name="google" class="ms-2"></i-bs>}
-                @case (MailAccountType.Outlook_OAuth) {<i-bs name="microsoft" class="ms-2"></i-bs>}
+                @case (MailAccountType.IMAP) {<pngx-bs-icon name="envelope-at-fill" class="ms-2"></pngx-bs-icon>}
+                @case (MailAccountType.Gmail_OAuth) {<pngx-bs-icon name="google" class="ms-2"></pngx-bs-icon>}
+                @case (MailAccountType.Outlook_OAuth) {<pngx-bs-icon name="microsoft" class="ms-2"></pngx-bs-icon>}
               }
             </button>
           </div>
@@ -59,7 +59,7 @@
             <div class="btn-group d-block d-sm-none">
               <div ngbDropdown container="body" class="d-inline-block">
                 <button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
-                  <i-bs name="three-dots-vertical"></i-bs>
+                  <pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
                 </button>
                 <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
                   <button (click)="editMailAccount(account)" [disabled]="!userCanEdit(account)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" ngbDropdownItem i18n>Edit</button>
@@ -72,18 +72,18 @@
             <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
               <div class="btn-group">
                 <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userCanEdit(account)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailAccount(account)">
-                  <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
+                  <pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
                 </button>
                 <button *pngxIfOwner="account" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(account)">
-                  <i-bs width="1em" height="1em" name="person-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
+                  <pngx-bs-icon width="1em" height="1em" name="person-lock" class="me-1"></pngx-bs-icon><ng-container i18n>Permissions</ng-container>
                 </button>
                 <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)">
-                  <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
+                  <pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
                 </button>
               </div>
               <div class="btn-group">
                 <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-secondary" type="button" (click)="processAccount(account)">
-                  <i-bs width="1em" height="1em" name="arrow-clockwise" class="me-1"></i-bs><ng-container i18n>Process Mail</ng-container>
+                  <pngx-bs-icon width="1em" height="1em" name="arrow-clockwise" class="me-1"></pngx-bs-icon><ng-container i18n>Process Mail</ng-container>
                 </button>
               </div>
             </div>
@@ -102,7 +102,7 @@
   <h4 class="mt-4">
     <ng-container i18n>Mail rules</ng-container>
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailRule()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
-      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Rule</ng-container>
+      <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Rule</ng-container>
     </button>
   </h4>
   <ul class="list-group">
@@ -140,14 +140,14 @@
           </div>
           <div class="col d-flex align-items-center d-none d-sm-flex" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ProcessedMail }">
             <button class="btn btn-sm btn-outline-secondary" type="button" (click)="viewProcessedMail(rule)">
-              <i-bs width="1em" height="1em" name="clock-history" class="me-1"></i-bs><ng-container i18n>View Processed Mail</ng-container>
+              <pngx-bs-icon width="1em" height="1em" name="clock-history" class="me-1"></pngx-bs-icon><ng-container i18n>View Processed Mail</ng-container>
             </button>
           </div>
           <div class="col-3">
             <div class="btn-group d-block d-sm-none">
               <div ngbDropdown container="body" class="d-inline-block">
                 <button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
-                  <i-bs name="three-dots-vertical"></i-bs>
+                  <pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
                 </button>
                 <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
                   <button (click)="editMailRule(rule)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" [disabled]="!userCanEdit(rule)" ngbDropdownItem i18n>Edit</button>
@@ -160,18 +160,18 @@
             <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
               <div class="btn-group">
                 <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" [disabled]="!userCanEdit(rule)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailRule(rule)">
-                  <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
+                  <pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
                 </button>
                 <button *pngxIfOwner="rule" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(rule)">
-                  <i-bs width="1em" height="1em" name="person-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
+                  <pngx-bs-icon width="1em" height="1em" name="person-lock" class="me-1"></pngx-bs-icon><ng-container i18n>Permissions</ng-container>
                 </button>
                 <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }" [disabled]="!userIsOwner(rule)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)">
-                  <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
+                  <pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
                 </button>
               </div>
               <div class="btn-group">
                 <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }" class="btn btn-sm btn-outline-secondary" type="button" (click)="copyMailRule(rule)">
-                  <i-bs width="1em" height="1em" name="files" class="me-1"></i-bs><ng-container i18n>Copy</ng-container>
+                  <pngx-bs-icon width="1em" height="1em" name="files" class="me-1"></pngx-bs-icon><ng-container i18n>Copy</ng-container>
                 </button>
               </div>
             </div>

src-ui/src/app/components/manage/mail/mail.component.spec.ts

@@ -14,7 +14,6 @@ import {
   NgbModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import { MailAccount, MailAccountType } from 'src/app/data/mail-account'
@@ -76,7 +75,6 @@ describe('MailComponent', () => {
         ReactiveFormsModule,
         NgbAlertModule,
         NgSelectModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         MailComponent,
         PageHeaderComponent,
         IfPermissionsDirective,

src-ui/src/app/components/manage/mail/mail.component.ts

@@ -2,8 +2,8 @@ import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { ActivatedRoute } from '@angular/router'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, first, takeUntil, tap } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { MailAccount, MailAccountType } from 'src/app/data/mail-account'
 import { MailRule } from 'src/app/data/mail-rule'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
@@ -39,7 +39,7 @@ import { ProcessedMailDialogComponent } from './processed-mail-dialog/processed-
     FormsModule,
     ReactiveFormsModule,
     NgbDropdownModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class MailComponent

src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.html

@@ -1,11 +1,11 @@
 <div class="modal-header">
   <h6 class="modal-title" id="modal-basic-title" i18n>Processed Mail for <em>{{ rule().name }}</em></h6>
   <button class="btn btn-sm btn-link text-muted me-auto p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
-    <i-bs name="question-circle"></i-bs>
+    <pngx-bs-icon name="question-circle"></pngx-bs-icon>
   </button>
   <ng-template #infoPopover>
     <a href="https://docs.paperless-ngx.com/usage#processed-mail" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
-    <i-bs class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></i-bs>
+    <pngx-bs-icon class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></pngx-bs-icon>
   </ng-template>
   <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
 </div>
@@ -56,13 +56,13 @@
               <td>
                 @switch (mail.status) {
                   @case ('SUCCESS') {
-                    <i-bs name="check-circle" title="SUCCESS" class="text-success" [ngbTooltip]="statusTooltip"></i-bs>
+                    <pngx-bs-icon name="check-circle" title="SUCCESS" class="text-success" [ngbTooltip]="statusTooltip"></pngx-bs-icon>
                   }
                   @case ('FAILED') {
-                    <i-bs name="exclamation-triangle" title="FAILED" class="text-danger" [ngbTooltip]="statusTooltip"></i-bs>
+                    <pngx-bs-icon name="exclamation-triangle" title="FAILED" class="text-danger" [ngbTooltip]="statusTooltip"></pngx-bs-icon>
                   }
                   @default {
-                    <i-bs name="slash-circle" title="{{ mail.status }}" class="text-muted" [ngbTooltip]="statusTooltip"></i-bs>
+                    <pngx-bs-icon name="slash-circle" title="{{ mail.status }}" class="text-muted" [ngbTooltip]="statusTooltip"></pngx-bs-icon>
                   }
                 }
               </td>

src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.spec.ts

@@ -8,7 +8,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
 import { ProcessedMailDialogComponent } from './processed-mail-dialog.component'
@@ -47,11 +46,7 @@ describe('ProcessedMailDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        ProcessedMailDialogComponent,
-        FormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
+      imports: [ProcessedMailDialogComponent, FormsModule],
       providers: [
         DatePipe,
         NgbActiveModal,

src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.ts

@@ -7,7 +7,7 @@ import {
   NgbPopoverModule,
   NgbTooltipModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { ConfirmButtonComponent } from 'src/app/components/common/confirm-button/confirm-button.component'
 import { MailRule } from 'src/app/data/mail-rule'
 import { ProcessedMail } from 'src/app/data/processed-mail'
@@ -23,7 +23,7 @@ import { ToastService } from 'src/app/services/toast.service'
     NgbPagination,
     NgbPopoverModule,
     NgbTooltipModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
     FormsModule,
     ReactiveFormsModule,
     SlicePipe,

src-ui/src/app/components/manage/saved-views/saved-views.component.html

@@ -43,7 +43,7 @@
                 type="button"
                 (click)="editPermissions(view)"
                 *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.SavedView }"
-                i18n><i-bs class="me-1" name="person-fill-lock"></i-bs>Permissions</button>
+                ><pngx-bs-icon class="me-1" name="person-fill-lock"></pngx-bs-icon><ng-container i18n>Permissions</ng-container></button>
               <pngx-confirm-button
                 label="Delete"
                 i18n-label

src-ui/src/app/components/manage/saved-views/saved-views.component.spec.ts

@@ -6,7 +6,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { Subject, of, throwError } from 'rxjs'
 import { SavedView } from 'src/app/data/saved-view'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -54,7 +53,6 @@ describe('SavedViewsComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         ReactiveFormsModule,
         FormsModule,
         DragDropModule,

src-ui/src/app/components/manage/saved-views/saved-views.component.ts

@@ -1,10 +1,10 @@
 import { AsyncPipe } from '@angular/common'
 import {
   Component,
-  OnDestroy,
-  OnInit,
   computed,
   inject,
+  OnDestroy,
+  OnInit,
   signal,
 } from '@angular/core'
 import {
@@ -15,8 +15,8 @@ import {
 } from '@angular/forms'
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'
 import { dirtyCheck } from '@ngneat/dirty-check-forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { BehaviorSubject, Observable, of, switchMap, takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { PermissionsDialogComponent } from 'src/app/components/common/permissions-dialog/permissions-dialog.component'
 import { DisplayMode } from 'src/app/data/document'
 import { SavedView } from 'src/app/data/saved-view'
@@ -56,7 +56,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
     ReactiveFormsModule,
     AsyncPipe,
     NgbPaginationModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class SavedViewsComponent

src-ui/src/app/components/manage/share-links/share-link-bundle-list/share-link-bundle-list.component.html

@@ -47,7 +47,7 @@
                         i18n-aria-label
                       >
                         <span class="badge text-bg-warning text-uppercase me-2">{{ statusLabel(bundle.status) }}</span>
-                        <i-bs name="exclamation-triangle-fill" class="text-warning"></i-bs>
+                        <pngx-bs-icon name="exclamation-triangle-fill" class="text-warning"></pngx-bs-icon>
                       </button>
                       <ng-template #errorDetail>
                         @if (bundle.last_error.timestamp) {
@@ -107,10 +107,10 @@
                         i18n-title
                       >
                         @if (copiedSlug() === bundle.slug) {
-                          <i-bs name="clipboard-check"></i-bs>
+                          <pngx-bs-icon name="clipboard-check"></pngx-bs-icon>
                         }
                         @if (copiedSlug() !== bundle.slug) {
-                          <i-bs name="clipboard"></i-bs>
+                          <pngx-bs-icon name="clipboard"></pngx-bs-icon>
                         }
                         <span class="visually-hidden" i18n>Copy share link</span>
                       </button>
@@ -121,7 +121,7 @@
                           [disabled]="loading()"
                           (click)="retry(bundle)"
                         >
-                          <i-bs name="arrow-clockwise"></i-bs>
+                          <pngx-bs-icon name="arrow-clockwise"></pngx-bs-icon>
                           <span class="visually-hidden" i18n>Retry</span>
                         </button>
                       }

src-ui/src/app/components/manage/share-links/share-link-bundle-list/share-link-bundle-list.component.spec.ts

@@ -1,6 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { FileVersion } from 'src/app/data/share-link'
 import {
@@ -44,10 +43,7 @@ describe('ShareLinkBundleListComponent', () => {
     service.rebuildBundle.mockReturnValue(of(sampleBundle()))
 
     TestBed.configureTestingModule({
-      imports: [
-        ShareLinkBundleListComponent,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
+      imports: [ShareLinkBundleListComponent],
       providers: [
         { provide: ShareLinkBundleService, useValue: service },
         { provide: ToastService, useValue: toastService },

src-ui/src/app/components/manage/share-links/share-link-bundle-list/share-link-bundle-list.component.ts

@@ -6,8 +6,10 @@ import {
   NgbPaginationModule,
   NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, catchError, of, switchMap, takeUntil, timer } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
+import { ConfirmButtonComponent } from 'src/app/components/common/confirm-button/confirm-button.component'
+import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 import { FileVersion } from 'src/app/data/share-link'
 import {
   SHARE_LINK_BUNDLE_FILE_VERSION_LABELS,
@@ -25,8 +27,6 @@ import { ShareLinkBundleService } from 'src/app/services/rest/share-link-bundle.
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
-import { ConfirmButtonComponent } from 'src/app/components/common/confirm-button/confirm-button.component'
-import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 
 @Component({
   selector: 'pngx-share-link-bundle-list',
@@ -38,7 +38,7 @@ import { LoadingComponentWithPermissions } from 'src/app/components/loading-comp
     FormsModule,
     NgbPaginationModule,
     NgbPopoverModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
     SortableDirective,
     FileSizePipe,
   ],

src-ui/src/app/components/manage/share-links/share-link-list/share-link-list.component.html

@@ -26,7 +26,7 @@
                 <a routerLink="/documents/{{ link.document }}">{{ link.document_title | documentTitle }}</a>
                 <span class="badge bg-primary text-primary-text-contrast ms-3 small fs-normal cursor-pointer" (click)="copyDocumentID(link.document)">
                   @if (copiedDocumentID() === link.document) {
-                    <i-bs width="1em" height="1em" name="clipboard-check" class="me-1"></i-bs><ng-container i18n>Copied!</ng-container>
+                    <pngx-bs-icon width="1em" height="1em" name="clipboard-check" class="me-1"></pngx-bs-icon><ng-container i18n>Copied!</ng-container>
                   } @else {
                     ID: {{link.document}}
                   }
@@ -60,9 +60,9 @@
                       i18n-title
                     >
                       @if (copiedID() === link.id) {
-                        <i-bs name="clipboard-check"></i-bs>
+                        <pngx-bs-icon name="clipboard-check"></pngx-bs-icon>
                       } @else {
-                        <i-bs name="clipboard"></i-bs>
+                        <pngx-bs-icon name="clipboard"></pngx-bs-icon>
                       }
                       <span class="visually-hidden" i18n>Copy share link</span>
                     </button>

src-ui/src/app/components/manage/share-links/share-link-list/share-link-list.component.spec.ts

@@ -1,7 +1,6 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { RouterTestingModule } from '@angular/router/testing'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { FileVersion, ShareLink } from 'src/app/data/share-link'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
@@ -38,11 +37,7 @@ describe('ShareLinkListComponent', () => {
     }
 
     TestBed.configureTestingModule({
-      imports: [
-        ShareLinkListComponent,
-        NgxBootstrapIconsModule.pick(allIcons),
-        RouterTestingModule,
-      ],
+      imports: [ShareLinkListComponent, RouterTestingModule],
       providers: [
         { provide: ShareLinkService, useValue: service },
         { provide: ToastService, useValue: toastService },

src-ui/src/app/components/manage/share-links/share-link-list/share-link-list.component.ts

@@ -4,8 +4,8 @@ import { Component, OnInit, inject, signal } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { ConfirmButtonComponent } from 'src/app/components/common/confirm-button/confirm-button.component'
 import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 import { FileVersion, ShareLink } from 'src/app/data/share-link'
@@ -36,7 +36,7 @@ import { environment } from 'src/environments/environment'
     FormsModule,
     IfPermissionsDirective,
     NgbPaginationModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
     RouterModule,
     SortableDirective,
   ],

src-ui/src/app/components/manage/share-links/share-links.component.spec.ts

@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { ActivatedRoute, convertToParamMap, Router } from '@angular/router'
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import {
   PermissionAction,
@@ -21,12 +20,7 @@ describe('ShareLinksComponent', () => {
 
   const configure = async (type: string = null) => {
     await TestBed.configureTestingModule({
-      imports: [
-        ShareLinksComponent,
-        NgbNavModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-        PageHeaderComponent,
-      ],
+      imports: [ShareLinksComponent, NgbNavModule, PageHeaderComponent],
       providers: [
         PermissionsService,
         {

src-ui/src/app/components/manage/workflows/workflows.component.html

@@ -6,7 +6,7 @@
   infoLink="usage/#workflows"
   >
   <button type="button" class="btn btn-sm btn-outline-primary" (click)="editWorkflow()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }">
-    <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Workflow</ng-container>
+    <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Workflow</ng-container>
   </button>
 </pngx-page-header>
 
@@ -48,7 +48,7 @@
           <div class="btn-group d-block d-sm-none">
             <div ngbDropdown container="body" class="d-inline-block">
               <button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
-                <i-bs name="three-dots-vertical"></i-bs>
+                <pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
               </button>
               <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
                 <button (click)="editWorkflow(workflow)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }" ngbDropdownItem i18n>Edit</button>
@@ -60,15 +60,15 @@
           <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
             <div class="btn-group">
               <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editWorkflow(workflow)">
-                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
+                <pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
               </button>
               <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteWorkflow(workflow)">
-                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
+                <pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
               </button>
             </div>
             <div class="btn-group">
               <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="copyWorkflow(workflow)">
-                <i-bs width="1em" height="1em" name="files" class="me-1"></i-bs><ng-container i18n>Copy</ng-container>
+                <pngx-bs-icon width="1em" height="1em" name="files" class="me-1"></pngx-bs-icon><ng-container i18n>Copy</ng-container>
               </button>
             </div>
           </div>

src-ui/src/app/components/manage/workflows/workflows.component.spec.ts

@@ -10,7 +10,6 @@ import {
   NgbPaginationModule,
   NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { Workflow } from 'src/app/data/workflow'
 import { WorkflowActionType } from 'src/app/data/workflow-action'
@@ -87,7 +86,6 @@ describe('WorkflowsComponent', () => {
         ReactiveFormsModule,
         NgbModalModule,
         NgbPopoverModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         WorkflowsComponent,
         IfPermissionsDirective,
         PageHeaderComponent,

src-ui/src/app/components/manage/workflows/workflows.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil, tap } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { Workflow } from 'src/app/data/workflow'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsService } from 'src/app/services/permissions.service'
@@ -27,7 +27,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
     FormsModule,
     ReactiveFormsModule,
     NgbDropdownModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class WorkflowsComponent