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

src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.html

@@ -1,6 +1,6 @@
 <div class="btn-group" ngbDropdown autoClose="outside">
   <button class="btn btn-sm btn-outline-secondary dropdown-toggle" ngbDropdownToggle aria-label="Versions" i18n-aria-label>
-    <i-bs name="file-earmark-diff"></i-bs>
+    <pngx-bs-icon name="file-earmark-diff"></pngx-bs-icon>
     <span class="d-none d-lg-inline ps-1" i18n>Versions</span>
     @if (versions.length > 1) {
       <span class="badge text-bg-secondary ms-1">{{ versions.length }}</span>
@@ -35,7 +35,7 @@
             title="Upload a new version"
             i18n-title
           >
-            <i-bs name="file-earmark-plus"></i-bs><span class="ps-1" i18n>Upload</span>
+            <pngx-bs-icon name="file-earmark-plus"></pngx-bs-icon><span class="ps-1" i18n>Upload</span>
           </button>
           <button
             class="btn btn-sm btn-outline-secondary w-100"
@@ -44,7 +44,7 @@
             title="Use an existing document"
             i18n-title
           >
-            <i-bs name="file-earmark"></i-bs><span class="ps-1" i18n>Existing</span>
+            <pngx-bs-icon name="file-earmark"></pngx-bs-icon><span class="ps-1" i18n>Existing</span>
           </button>
         </div>
       } @else {
@@ -81,9 +81,9 @@
           >
             <div class="check mx-3">
               @if (selectedVersionId === version.id) {
-                <i-bs name="check-circle"></i-bs>
+                <pngx-bs-icon name="check-circle"></pngx-bs-icon>
               } @else {
-                <i-bs class="text-muted" name="circle"></i-bs>
+                <pngx-bs-icon class="text-muted" name="circle"></pngx-bs-icon>
               }
             </div>
             <div class="d-flex flex-column">
@@ -121,9 +121,9 @@
                     (click)="isEditingVersion(version.id) ? submitEditedVersionLabel(version, $event) : beginEditingVersion(version, $event)"
                   >
                     @if (isEditingVersion(version.id)) {
-                      <i-bs width=".8rem" height=".8rem" name="check-lg"></i-bs>
+                      <pngx-bs-icon width=".8rem" height=".8rem" name="check-lg"></pngx-bs-icon>
                     } @else {
-                      <i-bs width=".8rem" height=".8rem" name="pencil"></i-bs>
+                      <pngx-bs-icon width=".8rem" height=".8rem" name="pencil"></pngx-bs-icon>
                     }
                   </button>
                 }

src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.spec.ts

@@ -3,13 +3,12 @@ import { SimpleChange, signal } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { Subject, of, throwError } from 'rxjs'
 import { DocumentVersionInfo } from 'src/app/data/document'
 import {
   PermissionAction,
-  PermissionsService,
   PermissionType,
+  PermissionsService,
 } from 'src/app/services/permissions.service'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -64,10 +63,7 @@ describe('DocumentVersionDropdownComponent', () => {
     }
 
     await TestBed.configureTestingModule({
-      imports: [
-        DocumentVersionDropdownComponent,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
+      imports: [DocumentVersionDropdownComponent],
       providers: [
         DatePipe,
         {

src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.ts

@@ -12,7 +12,6 @@ import {
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { merge, of, Subject } from 'rxjs'
 import {
   filter,
@@ -24,6 +23,7 @@ import {
   takeUntil,
   tap,
 } from 'rxjs/operators'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { DocumentVersionInfo } from 'src/app/data/document'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
@@ -44,7 +44,7 @@ import { AddExistingDocumentVersionDialogComponent } from './add-existing-docume
   imports: [
     FormsModule,
     NgbDropdownModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
     ConfirmButtonComponent,
     IfPermissionsDirective,
     SlicePipe,