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

src-ui/src/app/components/common/input/check/check.component.html

@@ -5,7 +5,7 @@
         <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
+            <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
             </button>
           }
         </div>

src-ui/src/app/components/common/input/check/check.component.ts

@@ -5,7 +5,7 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -19,7 +19,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-check',
   templateUrl: './check.component.html',
   styleUrls: ['./check.component.scss'],
-  imports: [FormsModule, ReactiveFormsModule, NgClass, NgxBootstrapIconsModule],
+  imports: [FormsModule, ReactiveFormsModule, NgClass, BootstrapIconComponent],
 })
 export class CheckComponent extends AbstractInputComponent<boolean> {
   constructor() {

src-ui/src/app/components/common/input/color/color.component.html

@@ -15,7 +15,7 @@
     <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" [ngModelOptions]="{standalone: true}" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" #colorPicker="ngbPopover" placement="bottom" popoverClass="shadow">
 
     <button class="btn btn-outline-secondary" type="button" (click)="randomize()" aria-label="Choose a random color" i18n-aria-label>
-      <i-bs name="dice5"></i-bs>
+      <pngx-bs-icon name="dice5"></pngx-bs-icon>
     </button>
 
   </div>

src-ui/src/app/components/common/input/color/color.component.spec.ts

@@ -5,7 +5,6 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { ColorSliderModule } from 'ngx-color/slider'
 import { ColorComponent } from './color.component'
 
@@ -22,7 +21,6 @@ describe('ColorComponent', () => {
         ReactiveFormsModule,
         NgbPopoverModule,
         ColorSliderModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         ColorComponent,
       ],
     }).compileComponents()

src-ui/src/app/components/common/input/color/color.component.ts

@@ -5,8 +5,8 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { ColorSliderModule } from 'ngx-color/slider'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { randomColor } from 'src/app/utils/color'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -22,7 +22,7 @@ import { AbstractInputComponent } from '../abstract-input'
   templateUrl: './color.component.html',
   styleUrls: ['./color.component.scss'],
   imports: [
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
     NgbPopoverModule,
     FormsModule,
     ReactiveFormsModule,

src-ui/src/app/components/common/input/custom-fields-values/custom-fields-values.component.html

@@ -75,7 +75,7 @@
         }
       }
       <button type="button" class="btn btn-link text-danger" (click)="removeSelectedField.next(fieldId)" aria-label="Remove custom field" i18n-aria-label>
-        <i-bs name="trash"></i-bs>
+        <pngx-bs-icon name="trash"></pngx-bs-icon>
       </button>
     </div>
   }

src-ui/src/app/components/common/input/custom-fields-values/custom-fields-values.component.ts

@@ -14,7 +14,7 @@ import {
 } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { AbstractInputComponent } from '../abstract-input'
@@ -52,7 +52,7 @@ import { UrlComponent } from '../url/url.component'
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
     TextAreaComponent,
   ],
 })

src-ui/src/app/components/common/input/date/date.component.html

@@ -4,7 +4,7 @@
       <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
+          <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
@@ -14,7 +14,7 @@
             (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
             name="dp" [(ngModel)]="value" [ngModelOptions]="{standalone: true}" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled" [footerTemplate]="datePickerFooterTemplate">
           <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled" aria-label="Open date picker" i18n-aria-label>
-            <i-bs width="1.2em" height="1.2em" name="calendar"></i-bs>
+            <pngx-bs-icon width="1.2em" height="1.2em" name="calendar"></pngx-bs-icon>
           </button>
           <ng-template #datePickerFooterTemplate>
             <div class="btn-group-xs border-top p-2 d-flex">
@@ -24,7 +24,7 @@
           </ng-template>
           @if (showFilter) {
             <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ filterButtonTitle }}">
-              <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
+              <pngx-bs-icon width="1.2em" height="1.2em" name="filter"></pngx-bs-icon>
             </button>
           }
         </div>

src-ui/src/app/components/common/input/date/date.component.spec.ts

@@ -4,7 +4,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { routes } from 'src/app/app-routing.module'
 import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter'
 import { DateComponent } from './date.component'
@@ -16,10 +15,7 @@ describe('DateComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      imports: [
-        NgxBootstrapIconsModule.pick(allIcons),
-        RouterModule.forRoot(routes),
-      ],
+      imports: [RouterModule.forRoot(routes)],
       providers: [
         {
           provide: NgbDateParserFormatter,

src-ui/src/app/components/common/input/date/date.component.ts

@@ -19,7 +19,7 @@ import {
   NgbDatepickerModule,
   NgbDateStruct,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { SettingsService } from 'src/app/services/settings.service'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -39,7 +39,7 @@ import { AbstractInputComponent } from '../abstract-input'
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class DateComponent

src-ui/src/app/components/common/input/document-link/document-link.component.html

@@ -9,7 +9,7 @@
         }
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
+            <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
@@ -41,15 +41,15 @@
     <ng-template ng-label-tmp let-document="item">
       <div class="d-flex align-items-center">
         @if (!disabled) {
-          <button class="btn p-0 lh-1" (click)="unselect(document)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
+          <button class="btn p-0 lh-1" (click)="unselect(document)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove link" i18n-title><pngx-bs-icon name="x"></pngx-bs-icon></button>
         }
         @if (document.title) {
           <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
-            <i-bs width="0.9em" height="0.9em" name="file-text" class="me-1"></i-bs><span>{{document.title}}</span>
+            <pngx-bs-icon width="0.9em" height="0.9em" name="file-text" class="me-1"></pngx-bs-icon><span>{{document.title}}</span>
           </a>
         } @else {
           <span class="badge bg-light text-muted">
-            <i-bs width="0.9em" height="0.9em" name="exclamation-triangle-fill" class="me-1"></i-bs><span i18n>Unavailable</span>
+            <pngx-bs-icon width="0.9em" height="0.9em" name="exclamation-triangle-fill" class="me-1"></pngx-bs-icon><span i18n>Unavailable</span>
           </span>
         }
       </div>

src-ui/src/app/components/common/input/document-link/document-link.component.scss

@@ -19,7 +19,7 @@
     }
 }
 
-i-bs {
+pngx-bs-icon {
     cursor: pointer;
 }
 

src-ui/src/app/components/common/input/document-link/document-link.component.spec.ts

@@ -5,7 +5,6 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import { provideRouter } from '@angular/router'
 import { NgSelectComponent } from '@ng-select/ng-select'
-import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { of, Subject, throwError } from 'rxjs'
 import { FILTER_SIMPLE_TITLE } from 'src/app/data/filter-rule-type'
 import { DocumentService } from 'src/app/services/rest/document.service'
@@ -37,7 +36,7 @@ describe('DocumentLinkComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [DocumentLinkComponent, NgxBootstrapIconsModule.pick(allIcons)],
+      imports: [DocumentLinkComponent],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),

src-ui/src/app/components/common/input/document-link/document-link.component.ts

@@ -15,7 +15,6 @@ import {
 } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import {
   catchError,
   concat,
@@ -28,6 +27,7 @@ import {
   takeUntil,
   tap,
 } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { Document } from 'src/app/data/document'
 import { FILTER_SIMPLE_TITLE } from 'src/app/data/filter-rule-type'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
@@ -53,7 +53,7 @@ import { AbstractInputComponent } from '../abstract-input'
     RouterModule,
     NgTemplateOutlet,
     NgSelectModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class DocumentLinkComponent

src-ui/src/app/components/common/input/entries/entries.component.html

@@ -5,7 +5,7 @@
         <label class="form-label mb-0" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
       }
       <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="addEntry()">
-        <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add</ng-container>
+        <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add</ng-container>
       </button>
     </div>
     <div class="position-relative">
@@ -14,7 +14,7 @@
           <input type="text" class="form-control" [(ngModel)]="entry[0]" [ngModelOptions]="{standalone: true}" (change)="inputChange()" [disabled]="disabled" autocomplete="off">
           <input type="text" class="form-control" [(ngModel)]="entry[1]" [ngModelOptions]="{standalone: true}" (change)="inputChange()" [disabled]="disabled" autocomplete="off">
           <button type="button" class="btn btn-outline-secondary" (click)="removeEntry(i)" aria-label="Remove entry" i18n-aria-label>
-            <i-bs class="text-danger" name="trash"></i-bs>
+            <pngx-bs-icon class="text-danger" name="trash"></pngx-bs-icon>
           </button>
         </div>
       }

src-ui/src/app/components/common/input/entries/entries.component.spec.ts

@@ -4,7 +4,6 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { EntriesComponent } from './entries.component'
 
 describe('EntriesComponent', () => {
@@ -13,12 +12,7 @@ describe('EntriesComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-        EntriesComponent,
-      ],
+      imports: [FormsModule, ReactiveFormsModule, EntriesComponent],
     }).compileComponents()
   })
 

src-ui/src/app/components/common/input/entries/entries.component.ts

@@ -4,7 +4,7 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -18,7 +18,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-entries',
   templateUrl: './entries.component.html',
   styleUrl: './entries.component.scss',
-  imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
+  imports: [FormsModule, ReactiveFormsModule, BootstrapIconComponent],
 })
 export class EntriesComponent extends AbstractInputComponent<object> {
   entries = []

src-ui/src/app/components/common/input/file/file.component.html

@@ -6,7 +6,7 @@
         }
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
+            <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
             </button>
           }
         </div>
@@ -18,7 +18,7 @@
             <div class="form-text d-flex align-items-center">
               <span class="text-muted">{{filename}}</span>
               <button type="button" class="btn btn-link btn-sm text-danger ms-2" (click)="clear()">
-                <i-bs name="x"></i-bs><small i18n>Remove</small>
+                <pngx-bs-icon name="x"></pngx-bs-icon><small i18n>Remove</small>
               </button>
             </div>
         }

src-ui/src/app/components/common/input/monetary/monetary.component.html

@@ -6,7 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
+          <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
         </button>
       }
     </div>

src-ui/src/app/components/common/input/monetary/monetary.component.ts

@@ -5,7 +5,7 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -23,7 +23,7 @@ import { AbstractInputComponent } from '../abstract-input'
     CurrencyPipe,
     FormsModule,
     ReactiveFormsModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class MonetaryComponent extends AbstractInputComponent<string> {

src-ui/src/app/components/common/input/number/number.component.html

@@ -6,7 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
+          <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>

src-ui/src/app/components/common/input/number/number.component.ts

@@ -4,7 +4,7 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -19,7 +19,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-number',
   templateUrl: './number.component.html',
   styleUrls: ['./number.component.scss'],
-  imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
+  imports: [FormsModule, ReactiveFormsModule, BootstrapIconComponent],
 })
 export class NumberComponent extends AbstractInputComponent<number> {
   private documentService = inject(DocumentService)

src-ui/src/app/components/common/input/password/password.component.html

@@ -10,7 +10,7 @@
       <input #inputField [type]="showReveal && textVisible ? 'text' : 'password'" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" [ngModelOptions]="{standalone: true}" (focus)="onFocus()" (focusout)="onFocusOut()" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete">
       @if (showReveal) {
         <button type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
-          <i-bs name="eye"></i-bs>
+          <pngx-bs-icon name="eye"></pngx-bs-icon>
         </button>
       }
     </div>

src-ui/src/app/components/common/input/password/password.component.spec.ts

@@ -5,7 +5,6 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { By } from '@angular/platform-browser'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { PasswordComponent } from './password.component'
 
 describe('PasswordComponent', () => {
@@ -16,12 +15,7 @@ describe('PasswordComponent', () => {
   beforeEach(async () => {
     TestBed.configureTestingModule({
       providers: [],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-        PasswordComponent,
-      ],
+      imports: [FormsModule, ReactiveFormsModule, PasswordComponent],
     }).compileComponents()
 
     fixture = TestBed.createComponent(PasswordComponent)

src-ui/src/app/components/common/input/password/password.component.ts

@@ -4,7 +4,7 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -18,7 +18,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-password',
   templateUrl: './password.component.html',
   styleUrls: ['./password.component.scss'],
-  imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
+  imports: [FormsModule, ReactiveFormsModule, BootstrapIconComponent],
 })
 export class PasswordComponent extends AbstractInputComponent<string> {
   @Input()

src-ui/src/app/components/common/input/select/select.component.html

@@ -7,7 +7,7 @@
         }
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs  name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
+            <pngx-bs-icon  name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
             </button>
         }
       </div>
@@ -42,26 +42,26 @@
             }
             <span class="ng-value-label" [title]="item[bindLabel]">
               @if (iconField && item[iconField]) {
-                <i-bs class="me-2" [name]="item[iconField]"></i-bs>
+                <pngx-bs-icon class="me-2" [name]="item[iconField]"></pngx-bs-icon>
               }
               {{item[bindLabel]}}
             </span>
           </ng-template>
           <ng-template ng-option-tmp let-item="item">
               @if (iconField && item[iconField]) {
-                <i-bs class="me-2" [name]="item[iconField]"></i-bs>
+                <pngx-bs-icon class="me-2" [name]="item[iconField]"></pngx-bs-icon>
               }
               <span [title]="item[bindLabel]">{{item[bindLabel]}}</span>
           </ng-template>
         </ng-select>
         @if (allowCreateNew && !hideAddButton) {
           <button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled" aria-label="Create new item" i18n-aria-label>
-            <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
+            <pngx-bs-icon width="1.2em" height="1.2em" name="plus"></pngx-bs-icon>
           </button>
         }
         @if (showFilter) {
           <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
-            <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
+            <pngx-bs-icon width="1.2em" height="1.2em" name="filter"></pngx-bs-icon>
           </button>
         }
       </div>

src-ui/src/app/components/common/input/select/select.component.ts

@@ -12,7 +12,7 @@ import {
 } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { matchesSearchText } from 'src/app/utils/text-search'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -32,7 +32,7 @@ import { AbstractInputComponent } from '../abstract-input'
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class SelectComponent extends AbstractInputComponent<number | string> {

src-ui/src/app/components/common/input/switch/switch.component.html

@@ -5,12 +5,12 @@
         <label class="form-label" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
           {{title}}
           @if (showUnsetNote && isUnset) {
-            <i-bs width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
+            <pngx-bs-icon width="0.9em" height="0.9em" name="exclamation-triangle"></pngx-bs-icon>
           }
         </label>
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs  name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
+            <pngx-bs-icon  name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
@@ -22,7 +22,7 @@
           <label class="form-check-label" [class.text-muted]="showUnsetNote && isUnset" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
             {{title}}
             @if (showUnsetNote && isUnset) {
-              <i-bs class="ms-1" width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
+              <pngx-bs-icon class="ms-1" width="0.9em" height="0.9em" name="exclamation-triangle"></pngx-bs-icon>
             }
           </label>
         }

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -22,7 +22,7 @@
 
           <ng-template ng-label-tmp let-item="item">
             <button class="tag-wrap btn p-0 d-flex align-items-center" (click)="removeTag(item.id)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove tag" i18n-title>
-              <i-bs name="x" style="margin-inline-end: 1px;"></i-bs>
+              <pngx-bs-icon name="x" style="margin-inline-end: 1px;"></pngx-bs-icon>
               @if (item.id && tags) {
                 <pngx-tag style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
               }
@@ -32,12 +32,12 @@
             <div class="tag-option-row d-flex align-items-center" [class.w-auto]="!getTag(item.id)?.parent">
               @if (item.id && tags) {
                 @if (getTag(item.id)?.parent) {
-                  <i-bs name="list-nested" class="me-1"></i-bs>
+                  <pngx-bs-icon name="list-nested" class="me-1"></pngx-bs-icon>
                   <span class="hierarchy-reveal d-flex align-items-center">
                     <span class="parents d-flex align-items-center">
                       @for (p of getParentChain(item.id); track p.id) {
                         <span class="badge me-1" [style.background]="p.color" [style.color]="p.text_color">{{p.name}}</span>
-                        <i-bs name="chevron-right" width=".8em" height=".8em" class="me-1"></i-bs>
+                        <pngx-bs-icon name="chevron-right" width=".8em" height=".8em" class="me-1"></pngx-bs-icon>
                       }
                     </span>
                   </span>
@@ -49,12 +49,12 @@
         </ng-select>
         @if (allowCreate && !hideAddButton) {
           <button class="btn btn-outline-secondary" type="button" (click)="createTag(null, true)" [disabled]="disabled" aria-label="Create new tag" i18n-aria-label>
-            <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
+            <pngx-bs-icon width="1.2em" height="1.2em" name="plus"></pngx-bs-icon>
           </button>
         }
         @if (showFilter) {
           <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="hasPrivate || this.value === null" i18n-title title="Filter documents with these Tags">
-            <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
+            <pngx-bs-icon width="1.2em" height="1.2em" name="filter"></pngx-bs-icon>
           </button>
         }
       </div>

src-ui/src/app/components/common/input/tags/tags.component.spec.ts

@@ -15,7 +15,6 @@ import {
   NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import {
   DEFAULT_MATCHING_ALGORITHM,
@@ -71,7 +70,6 @@ describe('TagsComponent', () => {
         NgbModalModule,
         NgbAccordionModule,
         NgbPopoverModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         TagsComponent,
         TagEditDialogComponent,
         TextComponent,

src-ui/src/app/components/common/input/tags/tags.component.ts

@@ -18,8 +18,8 @@ import {
 import { RouterModule } from '@angular/router'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, firstValueFrom, tap } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { Tag } from 'src/app/data/tag'
 import { TagService } from 'src/app/services/rest/tag.service'
 import { matchesSearchText } from 'src/app/utils/text-search'
@@ -44,7 +44,7 @@ import { TagComponent } from '../../tag/tag.component'
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class TagsComponent implements OnInit, ControlValueAccessor {

src-ui/src/app/components/common/input/text/text.component.html

@@ -6,7 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
+          <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>

src-ui/src/app/components/common/input/text/text.component.ts

@@ -5,7 +5,7 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { RouterLink } from '@angular/router'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -22,7 +22,7 @@ import { AbstractInputComponent } from '../abstract-input'
   imports: [
     FormsModule,
     ReactiveFormsModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
     RouterLink,
   ],
 })

src-ui/src/app/components/common/input/textarea/textarea.component.html

@@ -6,7 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
+          <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>

src-ui/src/app/components/common/input/textarea/textarea.component.ts

@@ -4,7 +4,7 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -18,7 +18,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-textarea',
   templateUrl: './textarea.component.html',
   styleUrls: ['./textarea.component.scss'],
-  imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
+  imports: [FormsModule, ReactiveFormsModule, BootstrapIconComponent],
 })
 export class TextAreaComponent extends AbstractInputComponent<string> {
   @Input()

src-ui/src/app/components/common/input/url/url.component.html

@@ -4,7 +4,7 @@
       <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
+          <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
         </button>
       }
     </div>
@@ -12,7 +12,7 @@
       <div class="input-group" [class.is-invalid]="error">
         <input #inputField type="url" class="form-control" [class.is-invalid]="error" placeholder="https://" [id]="inputId" [(ngModel)]="value" [ngModelOptions]="{standalone: true}" (change)="onChange(value)" [disabled]="disabled">
         <a class="btn btn-outline-secondary rounded-end" title="Open link" i18n-title [href]="value" target="_blank">
-          <i-bs width="1.2em" height="1.2em" name="box-arrow-up-right"></i-bs>
+          <pngx-bs-icon width="1.2em" height="1.2em" name="box-arrow-up-right"></pngx-bs-icon>
         </a>
         <div class="invalid-feedback position-absolute top-100">
           {{error}}

src-ui/src/app/components/common/input/url/url.component.spec.ts

@@ -4,7 +4,6 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { UrlComponent } from './url.component'
 
 describe('TextComponent', () => {
@@ -15,12 +14,7 @@ describe('TextComponent', () => {
   beforeEach(async () => {
     TestBed.configureTestingModule({
       providers: [],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-        UrlComponent,
-      ],
+      imports: [FormsModule, ReactiveFormsModule, UrlComponent],
     }).compileComponents()
 
     fixture = TestBed.createComponent(UrlComponent)

src-ui/src/app/components/common/input/url/url.component.ts

@@ -4,7 +4,7 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -18,7 +18,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-url',
   templateUrl: './url.component.html',
   styleUrls: ['./url.component.scss'],
-  imports: [NgxBootstrapIconsModule, FormsModule, ReactiveFormsModule],
+  imports: [BootstrapIconComponent, FormsModule, ReactiveFormsModule],
 })
 export class UrlComponent extends AbstractInputComponent<string> {
   constructor() {