Performance: use small vec0 chunks and larger pages for the LLM index

The vec0 default of 1024 rows per vector chunk makes each chunk a multi-megabyte blob. On spinning disks, indexing a document took about 2.5 seconds and re-indexing one about 13 seconds. With 32 rows per chunk the same operations take about 35 and 180 milliseconds, with the write-ahead log a third of the size and no cost in query speed or file size. Pair that with 64 KiB SQLite pages, which made cold scans about 35% faster and warm ones about 45% faster at no write cost once the chunks are small. The page size is set before the file enters WAL mode, so it applies to new files. Neither setting changes the schema or any query, so there is no migration. An existing index picks up both the next time it is rebuilt through compact or rebuild.
Fix: make index and llmindex init wait for tesseract language install (#14670 )
2026-11-03 21:39:22 +00:00 · 2026-11-03 09:48:51 -08:00 · 2026-11-03 06:59:44 -08:00 · 2026-11-03 06:12:15 +00:00 · 2026-11-02 22:11:09 -08:00 · 2026-11-03 05:26:53 +00:00
265 changed files with 1768 additions and 1651 deletions
@@ -4,7 +4,7 @@
 # correct networking for the tests
 services:
  gotenberg:
-    image: docker.io/gotenberg/gotenberg:8.37
+    image: docker.io/gotenberg/gotenberg:8.38
    hostname: gotenberg
    container_name: gotenberg
    network_mode: host
@@ -71,7 +71,7 @@ services:
      PAPERLESS_TIKA_GOTENBERG_ENDPOINT: http://gotenberg:3000
      PAPERLESS_TIKA_ENDPOINT: http://tika:9998
  gotenberg:
-    image: docker.io/gotenberg/gotenberg:8.37
+    image: docker.io/gotenberg/gotenberg:8.38
    restart: unless-stopped
    # The gotenberg chromium route is used to convert .eml files. We do not
    # want to allow external content like tracking pixels or even javascript.
@@ -67,7 +67,7 @@ services:
      PAPERLESS_TIKA_GOTENBERG_ENDPOINT: http://gotenberg:3000
      PAPERLESS_TIKA_ENDPOINT: http://tika:9998
  gotenberg:
-    image: docker.io/gotenberg/gotenberg:8.37
+    image: docker.io/gotenberg/gotenberg:8.38
    restart: unless-stopped
    # The gotenberg chromium route is used to convert .eml files. We do not
    # want to allow external content like tracking pixels or even javascript.
@@ -56,7 +56,7 @@ services:
      PAPERLESS_TIKA_GOTENBERG_ENDPOINT: http://gotenberg:3000
      PAPERLESS_TIKA_ENDPOINT: http://tika:9998
  gotenberg:
-    image: docker.io/gotenberg/gotenberg:8.37
+    image: docker.io/gotenberg/gotenberg:8.38
    restart: unless-stopped
    # The gotenberg chromium route is used to convert .eml files. We do not
    # want to allow external content like tracking pixels or even javascript.
@@ -0,0 +1,57 @@
+# Container init flow
+
+Startup order of the s6-rc oneshot services under `docker/rootfs/etc/s6-overlay/s6-rc.d/`. An arrow `A --> B` means B lists A in its `dependencies.d/`, so B waits for A. Redundant (transitive) edges are omitted.
+
+Each labelled box is a group of services that can run in parallel: every service in it starts as soon as its own dependencies finish, so services in the same box run in parallel. A service does not wait for the rest of its group, only for the arrows pointing at it. Long-running services such as `init-tesseract-langs` (package installs) overlap with several later steps.
+
+```mermaid
+flowchart TD
+    subgraph w3 ["Run in parallel"]
+        init-tesseract-langs
+        init-modify-user
+        init-wait-for-db
+        init-wait-for-redis
+    end
+    subgraph w4 ["Run in parallel"]
+        init-folders
+        init-compile-bytecode
+    end
+    subgraph w6 ["Run in parallel"]
+        init-search-index
+        init-llmindex-migrate
+        init-superuser
+    end
+
+    base --> init-start --> init-env-file
+
+    init-env-file --> init-tesseract-langs
+    init-env-file --> init-modify-user
+    init-env-file --> init-wait-for-db
+    init-env-file --> init-wait-for-redis
+    init-start --> init-compile-bytecode
+
+    init-modify-user --> init-folders
+    init-modify-user --> init-compile-bytecode
+
+    init-folders --> init-migrations
+    init-compile-bytecode --> init-migrations
+    init-wait-for-db --> init-migrations
+
+    init-migrations --> init-search-index
+    init-migrations --> init-llmindex-migrate
+    init-migrations --> init-superuser
+
+    init-tesseract-langs --> init-search-index
+    init-tesseract-langs --> init-llmindex-migrate
+    init-tesseract-langs --> init-system-checks
+    init-superuser --> init-system-checks
+
+    init-search-index --> init-custom-init
+    init-system-checks --> init-custom-init
+    init-wait-for-redis --> init-custom-init
+
+    init-custom-init --> init-complete
+    init-llmindex-migrate --> init-complete
+```
+
+`init-search-index` and `init-llmindex-migrate` run `manage.py`, which runs the Django system checks, including the check that the configured OCR languages are installed, so they wait for `init-tesseract-langs`.
@@ -26,22 +26,22 @@ dependencies = [
  "dateparser~=1.4",
  # WARNING: django does not use semver.
  #          Only patch versions are guaranteed to not introduce breaking changes.
-  "django~=5.2.13",
+  "django~=5.2.18",
  "django-allauth[mfa,socialaccount]~=65.20.0",
  "django-auditlog~=3.4.1",
  "django-cachalot~=2.9.0",
  "django-compression-middleware~=0.5.0",
  "django-cors-headers~=4.9.0",
  "django-extensions~=4.1",
-  "django-filter>=25.1,<27",
-  "django-guardian>=3.3.3,<3.6",
+  "django-filter>=26.2,<27",
+  "django-guardian>=3.5.2,<3.6",
  "django-multiselectfield~=1.0.1",
  "django-rich~=2.2.0",
  "django-soft-delete~=1.0.18",
  "django-treenode>=0.24",
  "djangorestframework~=3.16",
  "drf-spectacular~=0.30",
-  "drf-spectacular-sidecar>=2026.7.1,<2026.10",
+  "drf-spectacular-sidecar>=2026.10.1,<2026.11",
  "drf-writable-nested~=0.7.1",
  "filelock>=3.32,<4.3",
  "flower>=2.0.1,<2.3",
@@ -76,7 +76,7 @@ dependencies = [
  "tantivy~=0.26.0",
  "tika-client[httpx]~=1.0",
  "torch>=2.13,<2.15",
-  "turbohtml~=1.10.0",
+  "turbohtml~=1.15.3",
  "watchfiles>=1.2",
  "whitenoise~=6.11",
  "whoosh-compat[tantivy]==0.3",
@@ -69,6 +69,9 @@
              "src/polyfills.ts"
            ],
            "tsConfig": "tsconfig.app.json",
+            "loader": {
+              ".svg": "text"
+            },
            "localize": true,
            "assets": [
              "src/apple-touch-icon.png",
@@ -123,7 +123,7 @@ test('sorting', async ({ page }) => {
  await page.getByRole('button', { name: 'Notes' }).click()
  await expect(page).toHaveURL(/sort=num_notes/)
  await page.getByRole('button', { name: 'Sort' }).click()
-  await page.locator('.w-100 > label > i-bs').first().click()
+  await page.locator('.w-100 > label > pngx-bs-icon').first().click()
  await expect(page).not.toHaveURL(/reverse=1/)
 })

@@ -28,7 +28,7 @@ module.exports = {
    'abstract-paperless-service',
  ],
  transformIgnorePatterns: [
-    'node_modules/(?!.*(\\.mjs$|tslib|lodash-es|normalize-diacritics|marked|@angular/common/locales/.*\\.js$))',
+    'node_modules/(?!.*(\\.mjs$|tslib|lodash-es|normalize-diacritics|marked|@angular/common/locales/.*\\.js$|bootstrap-icons/icons/.*\\.svg$))',
  ],
  moduleNameMapper: {
    ...esmPreset.moduleNameMapper,
@@ -687,7 +687,11 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">441,442</context>
+          <context context-type="linenumber">441</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
+          <context context-type="linenumber">442,443</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.html</context>
@@ -859,7 +863,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">460</context>
+          <context context-type="linenumber">473</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
@@ -1474,6 +1478,10 @@
          <context context-type="sourcefile">src/app/components/manage/mail/mail.component.html</context>
          <context context-type="linenumber">166</context>
        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/manage/saved-views/saved-views.component.html</context>
+          <context context-type="linenumber">46</context>
+        </context-group>
      </trans-unit>
      <trans-unit id="309314153079578337" datatype="html">
        <source>Default Permissions</source>
@@ -6788,21 +6796,21 @@
        <source>Email sent</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/common/email-document-dialog/email-document-dialog.component.ts</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">52</context>
        </context-group>
      </trans-unit>
      <trans-unit id="4632604705213766411" datatype="html">
        <source>Error emailing documents</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/common/email-document-dialog/email-document-dialog.component.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">58</context>
        </context-group>
      </trans-unit>
      <trans-unit id="3742745894977668908" datatype="html">
        <source>Error emailing document</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/common/email-document-dialog/email-document-dialog.component.ts</context>
-          <context context-type="linenumber">60</context>
+          <context context-type="linenumber">59</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6381578200008167206" datatype="html">
@@ -8588,7 +8596,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">483</context>
+          <context context-type="linenumber">496</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
@@ -8701,7 +8709,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/main.ts</context>
-          <context context-type="linenumber">483</context>
+          <context context-type="linenumber">168</context>
        </context-group>
      </trans-unit>
      <trans-unit id="5028777105388019087" datatype="html">
@@ -8863,63 +8871,82 @@
        <source>Save &amp; next</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">443</context>
+          <context context-type="linenumber">445</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
+          <context context-type="linenumber">456</context>
        </context-group>
      </trans-unit>
      <trans-unit id="4910102545766233758" datatype="html">
        <source>Save &amp; close</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">445</context>
+          <context context-type="linenumber">447</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
+          <context context-type="linenumber">458</context>
        </context-group>
      </trans-unit>
      <trans-unit id="3823219296477075982" datatype="html">
        <source>Discard</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">447,448</context>
+          <context context-type="linenumber">449</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
+          <context context-type="linenumber">450,451</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="5587846594415285055" datatype="html">
+        <source>More save options</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
+          <context context-type="linenumber">453</context>
        </context-group>
      </trans-unit>
      <trans-unit id="1309556917227148591" datatype="html">
        <source>Document loading...</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">455</context>
+          <context context-type="linenumber">468</context>
        </context-group>
      </trans-unit>
      <trans-unit id="2266163016683537825" datatype="html">
        <source>of <x id="INTERPOLATION" equiv-text="{{previewNumPages()}}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">484,485</context>
+          <context context-type="linenumber">497,498</context>
        </context-group>
      </trans-unit>
      <trans-unit id="944767796496567082" datatype="html">
        <source>Zoom out</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">488</context>
+          <context context-type="linenumber">501</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6421460271971606186" datatype="html">
        <source>Zoom</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">491</context>
+          <context context-type="linenumber">504</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6500061599200357251" datatype="html">
        <source>Zoom in</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">498</context>
+          <context context-type="linenumber">511</context>
        </context-group>
      </trans-unit>
      <trans-unit id="8191371354890763172" datatype="html">
        <source>Enter Password</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">532</context>
+          <context context-type="linenumber">545</context>
        </context-group>
      </trans-unit>
      <trans-unit id="5758784066858623886" datatype="html">
@@ -10377,31 +10404,31 @@
        </context-group>
      </trans-unit>
      <trans-unit id="2155249406916744630" datatype="html">
-        <source>View &quot;<x id="PH" equiv-text="this.list.activeSavedViewTitle"/>&quot; saved successfully.</source>
+        <source>View &quot;<x id="PH" equiv-text="view.name ?? title"/>&quot; saved successfully.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/document-list.component.ts</context>
-          <context context-type="linenumber">422</context>
+          <context context-type="linenumber">423</context>
        </context-group>
      </trans-unit>
      <trans-unit id="4646273665293421938" datatype="html">
-        <source>Failed to save view &quot;<x id="PH" equiv-text="this.list.activeSavedViewTitle"/>&quot;.</source>
+        <source>Failed to save view &quot;<x id="PH" equiv-text="title"/>&quot;.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/document-list.component.ts</context>
-          <context context-type="linenumber">428</context>
+          <context context-type="linenumber">429</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6837554170707123455" datatype="html">
        <source>View &quot;<x id="PH" equiv-text="savedView.name"/>&quot; created successfully.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/document-list.component.ts</context>
-          <context context-type="linenumber">497</context>
+          <context context-type="linenumber">498</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6028096992841030074" datatype="html">
        <source>View &quot;<x id="PH" equiv-text="savedView.name"/>&quot; created successfully, but could not update visibility settings.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/document-list.component.ts</context>
-          <context context-type="linenumber">503</context>
+          <context context-type="linenumber">504</context>
        </context-group>
      </trans-unit>
      <trans-unit id="739880801667335279" datatype="html">
@@ -11451,13 +11478,6 @@
          <context context-type="linenumber">4,5</context>
        </context-group>
      </trans-unit>
-      <trans-unit id="8420539325839715135" datatype="html">
-        <source><x id="START_TAG_I_BS" ctype="x-i_bs" equiv-text="&lt;i-bs class=&quot;me-1&quot; name=&quot;person-fill-lock&quot;&gt;"/><x id="CLOSE_TAG_I_BS" ctype="x-i_bs" equiv-text="&lt;/i-bs&gt;"/>Permissions</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/manage/saved-views/saved-views.component.html</context>
-          <context context-type="linenumber">46,47</context>
-        </context-group>
-      </trans-unit>
      <trans-unit id="6338800642797811873" datatype="html">
        <source>Documents page size</source>
        <context-group purpose="location">
@@ -13458,14 +13478,14 @@
        <source>Prev</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/main.ts</context>
-          <context context-type="linenumber">482</context>
+          <context context-type="linenumber">167</context>
        </context-group>
      </trans-unit>
      <trans-unit id="1241348629231510663" datatype="html">
        <source>End</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/main.ts</context>
-          <context context-type="linenumber">484</context>
+          <context context-type="linenumber">169</context>
        </context-group>
      </trans-unit>
    </body>
@@ -28,11 +28,11 @@
    "@ngneat/dirty-check-forms": "^3.0.3",
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.8",
+    "bootstrap-icons": "^1.13.2",
    "file-saver": "^2.0.5",
    "lodash-es": "^4.18.1",
    "marked": "~18.1.1",
    "mime-names": "^1.0.0",
-    "ngx-bootstrap-icons": "^1.9.3",
    "ngx-color": "^10.1.0",
    "ngx-cookie-service": "^22.0.0",
    "ngx-device-detector": "^12.0.0",
@@ -51,6 +51,9 @@ importers:
      bootstrap:
        specifier: ^5.3.8
        version: 5.3.8(@popperjs/core@2.11.8)
+      bootstrap-icons:
+        specifier: ^1.13.2
+        version: 1.13.2
      file-saver:
        specifier: ^2.0.5
        version: 2.0.5
@@ -63,9 +66,6 @@ importers:
      mime-names:
        specifier: ^1.0.0
        version: 1.0.0
-      ngx-bootstrap-icons:
-        specifier: ^1.9.3
-        version: 1.9.3(@angular/common@22.2.3(@angular/core@22.2.3(@angular/compiler@22.2.3)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.2.3(@angular/compiler@22.2.3)(rxjs@7.8.2))
      ngx-color:
        specifier: ^10.1.0
        version: 10.1.0(@angular/common@22.2.3(@angular/core@22.2.3(@angular/compiler@22.2.3)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.2.3(@angular/compiler@22.2.3)(rxjs@7.8.2))
@@ -2391,6 +2391,9 @@ packages:
    resolution: {integrity: sha512-DkVaaQHymRhpYEYo9x1oo7Q7B0Y6KJUsjm3c9eTyFDby4MHLBTwZ6ZDWBel5zrYxj1WsZgC5oLpiz+93MluXeA==}
    engines: {node: '>=20.19.0'}

+  bootstrap-icons@1.13.2:
+    resolution: {integrity: sha512-fAU1Ly3dH7hwRg+CB8EZ0Vl0fF80zgXHeUVJyfUOKzoURr+TbwISbCW5tKUoQLERaWYG2emTCybcPbD96hdD1A==}
+
  bootstrap@5.3.8:
    resolution: {integrity: sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==}
    peerDependencies:
@@ -3421,13 +3424,6 @@ packages:
  neo-async@2.6.2:
    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}

-  ngx-bootstrap-icons@1.9.3:
-    resolution: {integrity: sha512-UsFqJ/cn0u5W39hVMIDbm+ze1dCF9fDV839scqeimi70Efcmg41zOx6GgR6i2gWAVFR0OBso1cdqb4E75XhTSw==}
-    engines: {node: '>= 16.18.1', npm: '>= 8.11.0'}
-    peerDependencies:
-      '@angular/common': '>= 13.3.8'
-      '@angular/core': '>= 13.3.8'
-
  ngx-color@10.1.0:
    resolution: {integrity: sha512-yuxlE1LfN+PABIO4hv0Gw5ksq8g9XkMJKrGPn2SWbrre/gsH+kkyyn3rwSCurinnLCnw7czqenwQUtnBJm8yww==}
    peerDependencies:
@@ -6411,6 +6407,8 @@ snapshots:

  boolbase@2.0.0: {}

+  bootstrap-icons@1.13.2: {}
+
  bootstrap@5.3.8(@popperjs/core@2.11.8):
    dependencies:
      '@popperjs/core': 2.11.8
@@ -7648,12 +7646,6 @@ snapshots:

  neo-async@2.6.2: {}

-  ngx-bootstrap-icons@1.9.3(@angular/common@22.2.3(@angular/core@22.2.3(@angular/compiler@22.2.3)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.2.3(@angular/compiler@22.2.3)(rxjs@7.8.2)):
-    dependencies:
-      '@angular/common': 22.2.3(@angular/core@22.2.3(@angular/compiler@22.2.3)(rxjs@7.8.2))(rxjs@7.8.2)
-      '@angular/core': 22.2.3(@angular/compiler@22.2.3)(rxjs@7.8.2)
-      tslib: 2.8.1
-
  ngx-color@10.1.0(@angular/common@22.2.3(@angular/core@22.2.3(@angular/compiler@22.2.3)(rxjs@7.8.2))(rxjs@7.8.2))(@angular/core@22.2.3(@angular/compiler@22.2.3)(rxjs@7.8.2)):
    dependencies:
      '@angular/common': 22.2.3(@angular/core@22.2.3(@angular/compiler@22.2.3)(rxjs@7.8.2))(rxjs@7.8.2)
@@ -3,7 +3,6 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { Router, RouterModule } from '@angular/router'
 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
-import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import {
  provideUiTour,
  TourNgBootstrap,
@@ -47,7 +46,6 @@ describe('AppComponent', () => {
        ToastsComponent,
        FileDropComponent,
        TourNgBootstrap,
-        NgxBootstrapIconsModule.pick(allIcons),
      ],
      providers: [
        PermissionsGuard,
@@ -28,7 +28,7 @@
                                                      {{option.title}}
                                                    </h6>
                                                    <a class="btn btn-sm btn-link" title="Read the documentation about this setting" i18n-title [href]="getDocsUrl(option.config_key)" target="_blank" referrerpolicy="no-referrer">
-                                                        <i-bs name="info-circle"></i-bs>
+                                                        <pngx-bs-icon name="info-circle"></pngx-bs-icon>
                                                    </a>
                                                    @if (isExternallyConfigured(option.config_key)) {
                                                      @if (isSet(option.key)) {
@@ -40,11 +40,11 @@
                                                    @if (isSet(option.key)) {
                                                      @if (isExternallyConfigured(option.config_key)) {
                                                        <button type="button" class="btn btn-sm btn-link text-danger ms-auto pe-0" title="Use the externally configured value" i18n-title (click)="resetOption(option.key)">
-                                                            <i-bs class="me-1" name="x"></i-bs><ng-container i18n>Reset to external</ng-container>
+                                                            <pngx-bs-icon class="me-1" name="x"></pngx-bs-icon><ng-container i18n>Reset to external</ng-container>
                                                        </button>
                                                      } @else {
                                                        <button type="button" class="btn btn-sm btn-link text-danger ms-auto pe-0" title="Reset" i18n-title (click)="resetOption(option.key)">
-                                                            <i-bs class="me-1" name="x"></i-bs><ng-container i18n>Reset</ng-container>
+                                                            <pngx-bs-icon class="me-1" name="x"></pngx-bs-icon><ng-container i18n>Reset</ng-container>
                                                        </button>
                                                      }
                                                    }
@@ -6,7 +6,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { BrowserModule } from '@angular/platform-browser'
 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 {
  ConfigCategory,
@@ -39,7 +38,6 @@ describe('ConfigComponent', () => {
        NgSelectModule,
        FormsModule,
        ReactiveFormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        ConfigComponent,
        TextComponent,
        SelectComponent,
@@ -9,7 +9,6 @@ import {
 } from '@angular/forms'
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
 import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import {
  BehaviorSubject,
  Observable,
@@ -17,6 +16,7 @@ import {
  first,
  takeUntil,
 } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import {
  ConfigCategory,
  ConfigOption,
@@ -52,7 +52,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
    NgbNavModule,
    FormsModule,
    ReactiveFormsModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
  ],
 })
 export class ConfigComponent
@@ -8,7 +8,6 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { BrowserModule, By } from '@angular/platform-browser'
 import { NgbModule, NgbNavLink } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { LogService } from 'src/app/services/rest/log.service'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
@@ -40,7 +39,6 @@ describe('LogsComponent', () => {
      imports: [
        BrowserModule,
        NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        LogsComponent,
        PageHeaderComponent,
        CommonModule,
@@ -5,7 +5,7 @@
  i18n-info
  >
  <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()">
-    <i-bs class="me-2" name="airplane"></i-bs><ng-container i18n>Start tour</ng-container>
+    <pngx-bs-icon class="me-2" name="airplane"></pngx-bs-icon><ng-container i18n>Start tour</ng-container>
  </button>
  @if (canViewSystemStatus) {
    <button class="btn btn-sm btn-outline-primary position-relative ms-md-5 me-1" (click)="showSystemStatus()"
@@ -13,14 +13,14 @@
      @if (!systemStatus()) {
        <div class="spinner-border spinner-border-sm me-2 h-75" role="status"></div>
      } @else {
-        <i-bs class="me-2" name="card-checklist"></i-bs>
+        <pngx-bs-icon class="me-2" name="card-checklist"></pngx-bs-icon>
        @if (systemStatusHasErrors) {
          <span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
-            <i-bs name="exclamation-circle-fill" class="text-danger" width="1.75em" height="1.75em"></i-bs>
+            <pngx-bs-icon name="exclamation-circle-fill" class="text-danger" width="1.75em" height="1.75em"></pngx-bs-icon>
          </span>
        } @else {
          <span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
-            <i-bs name="check-circle-fill" class="text-primary" width="1.75em" height="1.75em"></i-bs>
+            <pngx-bs-icon name="check-circle-fill" class="text-primary" width="1.75em" height="1.75em"></pngx-bs-icon>
          </span>
        }
      }
@@ -30,7 +30,7 @@
  @if (permissionsService.isAdmin()) {
    <a class="btn btn-sm btn-primary" href="admin/" target="_blank">
      <ng-container i18n>Open Django Admin</ng-container>
-      <i-bs class="ms-2" name="arrow-up-right"></i-bs>
+      <pngx-bs-icon class="ms-2" name="arrow-up-right"></pngx-bs-icon>
    </a>
  }
 </pngx-page-header>
@@ -151,7 +151,7 @@
              </div>
              <div class="col-2">
                <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
-                  <i-bs width="1em" height="1em" name="x"></i-bs><ng-container i18n>Reset</ng-container>
+                  <pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon><ng-container i18n>Reset</ng-container>
                </button>
              </div>
            </div>
@@ -181,7 +181,7 @@
              <div class="col d-flex flex-row align-items-start">
                <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
                <button class="btn btn-sm btn-link text-muted me-auto p-0 ms-2" title="What's this?" i18n-title type="button" triggers="mouseenter:mouseleave" [ngbPopover]="updatesPopover" [autoClose]="true">
-                  <i-bs name="question-circle"></i-bs>
+                  <pngx-bs-icon name="question-circle"></pngx-bs-icon>
                </button>
                <ng-template #updatesPopover>
                  <p i18n>
@@ -263,9 +263,9 @@
                    <input type="radio" class="btn-check" id="suggestionSourceBoth" [value]="SuggestionSource.Both" formControlName="documentEditingSuggestionSource">
                    <label class="btn btn-outline-primary" for="suggestionSourceBoth"><ng-container i18n>Both</ng-container></label>
                    <input type="radio" class="btn-check" id="suggestionSourceML" [value]="SuggestionSource.ML" formControlName="documentEditingSuggestionSource">
-                    <label class="btn btn-outline-primary" for="suggestionSourceML"><i-bs class="me-1" name="cpu"></i-bs><ng-container i18n>ML only</ng-container></label>
+                    <label class="btn btn-outline-primary" for="suggestionSourceML"><pngx-bs-icon class="me-1" name="cpu"></pngx-bs-icon><ng-container i18n>ML only</ng-container></label>
                    <input type="radio" class="btn-check" id="suggestionSourceAI" [value]="SuggestionSource.AI" formControlName="documentEditingSuggestionSource">
-                    <label class="btn btn-outline-primary" for="suggestionSourceAI"><i-bs class="me-1" name="stars"></i-bs><ng-container i18n>AI only</ng-container></label>
+                    <label class="btn btn-outline-primary" for="suggestionSourceAI"><pngx-bs-icon class="me-1" name="stars"></pngx-bs-icon><ng-container i18n>AI only</ng-container></label>
                  </fieldset>
                </div>
              </div>
@@ -15,7 +15,6 @@ import {
  NgbNavLink,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
@@ -133,7 +132,6 @@ describe('SettingsComponent', () => {
        ReactiveFormsModule,
        NgbAlertModule,
        NgSelectModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        NgbModalModule,
        DragDropModule,
        SettingsComponent,
@@ -23,7 +23,6 @@ import {
  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import {
  BehaviorSubject,
@@ -34,6 +33,7 @@ import {
  takeUntil,
  tap,
 } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { Group } from 'src/app/data/group'
 import {
  SystemStatus,
@@ -135,7 +135,7 @@ const sidebarItemLabels: Record<HideableSidebarItemID, string> = {
    ReactiveFormsModule,
    NgbNavModule,
    NgbPopoverModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
  ],
 })
 export class SettingsComponent
@@ -7,13 +7,13 @@
  >
  <div class="btn-toolbar col col-md-auto align-items-center gap-2">
    <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
-      <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Clear selection</ng-container>
+      <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Clear selection</ng-container>
    </button>
    <button class="btn btn-sm btn-outline-primary me-2" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="visibleTasks.length === 0">
-      <i-bs name="check2-all" class="me-1"></i-bs>{{dismissButtonText}}
+      <pngx-bs-icon name="check2-all" class="me-1"></pngx-bs-icon>{{dismissButtonText}}
    </button>
    <button class="btn btn-sm btn-outline-primary me-2" (click)="dismissAllTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="totalTasks() === 0">
-      <i-bs name="check2-all" class="me-1"></i-bs><ng-container i18n>Dismiss all</ng-container>
+      <pngx-bs-icon name="check2-all" class="me-1"></pngx-bs-icon><ng-container i18n>Dismiss all</ng-container>
    </button>
    <div class="form-check form-switch mb-0 ms-2">
      <input id="autoRefreshSwitch" class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
@@ -86,7 +86,7 @@
      </div>
      @if (filterText?.length) {
        <button class="btn btn-link btn-sm px-2 position-absolute top-0 end-0 z-10" (click)="resetFilter()" aria-label="Clear search" i18n-aria-label>
-          <i-bs width="1em" height="1em" name="x"></i-bs>
+          <pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon>
        </button>
      }
      <label class="visually-hidden" for="taskSearch" i18n>Search tasks</label>
@@ -98,7 +98,7 @@

  @if (isFiltered) {
    <button class="btn btn-link py-0 ms-md-auto" (click)="resetFilters()">
-      <i-bs width="1em" height="1em" name="x"></i-bs><small i18n>Reset filters</small>
+      <pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon><small i18n>Reset filters</small>
    </button>
  }

@@ -125,7 +125,7 @@
      @if (hasMore) {
        <ng-container i18n>{{tasks.length}} of {{count}} tasks</ng-container>
        <button class="btn btn-link show-all p-0 ms-2 align-baseline" type="button" (click)="setSection(section)">
-          <ng-container i18n>Show all</ng-container><i-bs class="ms-1" width="1em" height="1em" name="arrow-right"></i-bs>
+          <ng-container i18n>Show all</ng-container><pngx-bs-icon class="ms-1" width="1em" height="1em" name="arrow-right"></pngx-bs-icon>
        </button>
      } @else {
        <ng-container i18n>{count, plural, =1 {1 task} other {{{count}} tasks}}</ng-container>
@@ -180,7 +180,7 @@
                @if (taskShowsSeparateTypeLabel(task)) {
                  <span class="me-2">{{ task.task_type_display }}</span>
                }
-                <span class="text-nowrap"><i-bs class="me-1" width="1em" height="1em" name="box-arrow-in-right"></i-bs>{{ task.trigger_source_display }}</span>
+                <span class="text-nowrap"><pngx-bs-icon class="me-1" width="1em" height="1em" name="box-arrow-in-right"></pngx-bs-icon>{{ task.trigger_source_display }}</span>
              </div>
            </td>
            <td class="d-none d-lg-table-cell created-col">{{ task.date_created | customDate:'short' }}</td>
@@ -197,7 +197,7 @@
                }
                @if (duplicateDocumentId(task)) {
                  <div class="small text-warning-emphasis d-flex align-items-center gap-1 mt-1">
-                    <i-bs class="lh-1" width="1em" height="1em" name="exclamation-triangle"></i-bs>
+                    <pngx-bs-icon class="lh-1" width="1em" height="1em" name="exclamation-triangle"></pngx-bs-icon>
                    <span>{{ duplicateTaskLabel(task) }}</span>
                  </div>
                }
@@ -213,18 +213,18 @@
            }
            <td class="d-lg-none">
              <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();" aria-label="View task details" i18n-aria-label>
-                <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
+                <pngx-bs-icon width="1.2em" height="1.2em" name="info-circle"></pngx-bs-icon>
              </button>
            </td>
            <td class="actions-col">
              <div class="btn-group" role="group">
                <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
-                  <i-bs name="check" class="me-1"></i-bs><ng-container i18n>Dismiss</ng-container>
+                  <pngx-bs-icon name="check" class="me-1"></pngx-bs-icon><ng-container i18n>Dismiss</ng-container>
                </button>
                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
                  @if (task.related_document_ids?.[0]) {
                    <a class="btn btn-sm btn-outline-primary" [routerLink]="['/documents', task.related_document_ids[0]]" (click)="dismissTask(task)">
-                      <i-bs name="file-text" class="me-1"></i-bs><ng-container i18n>Open Document</ng-container>
+                      <pngx-bs-icon name="file-text" class="me-1"></pngx-bs-icon><ng-container i18n>Open Document</ng-container>
                    </a>
                  }
                </ng-container>
@@ -10,7 +10,6 @@ import { By } from '@angular/platform-browser'
 import { Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModal, NgbModalRef, NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import {
@@ -174,7 +173,6 @@ describe('TasksComponent', () => {
      imports: [
        NgbModule,
        RouterTestingModule.withRoutes(routes),
-        NgxBootstrapIconsModule.pick(allIcons),
        FormsModule,
        TasksComponent,
        PageHeaderComponent,
@@ -9,7 +9,6 @@ import {
  NgbPaginationModule,
  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import {
  debounceTime,
  distinctUntilChanged,
@@ -22,6 +21,7 @@ import {
  takeUntil,
  timer,
 } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import {
  PaperlessTask,
  PaperlessTaskStatus,
@@ -151,7 +151,7 @@ const TRIGGER_SOURCE_OPTIONS: Array<{
    NgbDropdownModule,
    NgbPaginationModule,
    NgbPopoverModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
  ],
 })
 export class TasksComponent
@@ -5,16 +5,16 @@
    i18n-info
    infoLink="usage/#document-trash">
    <button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments().size === 0">
-        <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Clear selection</ng-container>
+        <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Clear selection</ng-container>
    </button>
    <button type="button" class="btn btn-sm btn-outline-primary" (click)="restoreAll(selectedDocuments())" [disabled]="selectedDocuments().size === 0">
-        <i-bs name="arrow-counterclockwise" class="me-1"></i-bs><ng-container i18n>Restore selected</ng-container>
+        <pngx-bs-icon name="arrow-counterclockwise" class="me-1"></pngx-bs-icon><ng-container i18n>Restore selected</ng-container>
    </button>
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash(selectedDocuments())" [disabled]="selectedDocuments().size === 0">
-        <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete selected</ng-container>
+        <pngx-bs-icon name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete selected</ng-container>
    </button>
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash().length === 0">
-        <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Empty trash</ng-container>
+        <pngx-bs-icon name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Empty trash</ng-container>
    </button>
 </pngx-page-header>

@@ -59,7 +59,7 @@
                    <td scope="row">
                      {{ document.title }}
                      <pngx-preview-popup [document]="document" linkClasses="btn btn-sm btn-link" #popupPreview>
-                        <i-bs name="eye"></i-bs>
+                        <pngx-bs-icon name="eye"></pngx-bs-icon>
                      </pngx-preview-popup>
                    </td>
                    <td scope="row" class="d-none d-sm-table-cell" i18n>{{ getDaysRemaining(document) }} days</td>
@@ -67,7 +67,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)="restore(document)" ngbDropdownItem i18n>Restore</button>
@@ -77,10 +77,10 @@
                    </div>
                    <div class="btn-group d-none d-sm-block">
                        <button class="btn btn-sm btn-outline-secondary" (click)="restore(document); $event.stopPropagation();">
-                            <i-bs width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></i-bs><ng-container i18n>Restore</ng-container>
+                            <pngx-bs-icon width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></pngx-bs-icon><ng-container i18n>Restore</ng-container>
                        </button>
                        <button class="btn btn-sm btn-outline-danger" (click)="delete(document); $event.stopPropagation();">
-                            <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>
                    </td>
@@ -9,7 +9,6 @@ import {
  NgbPaginationModule,
  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { ToastService } from 'src/app/services/toast.service'
 import { TrashService } from 'src/app/services/trash.service'
@@ -48,7 +47,6 @@ describe('TrashComponent', () => {
        ReactiveFormsModule,
        NgbPopoverModule,
        NgbPaginationModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        TrashComponent,
        PageHeaderComponent,
        ConfirmDialogComponent,
@@ -6,8 +6,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 { Document } from 'src/app/data/document'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -29,7 +29,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
    ReactiveFormsModule,
    NgbDropdownModule,
    NgbPaginationModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
  ],
 })
 export class TrashComponent
@@ -11,7 +11,7 @@
  <h4 class="d-flex">
    <ng-container i18n>Users</ng-container>
    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
-      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add User</ng-container>
+      <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add User</ng-container>
    </button>
  </h4>
  <ul class="list-group">
@@ -32,10 +32,10 @@
          <div class="col">
            <div class="btn-group">
              <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
-                <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" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }">
-                <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>
@@ -49,7 +49,7 @@
  <h4 class="mt-4 d-flex">
    <ng-container i18n>Groups</ng-container>
    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
-      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Group</ng-container>
+      <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Group</ng-container>
    </button>
  </h4>
  <ul class="list-group">
@@ -70,10 +70,10 @@
          <div class="col">
            <div class="btn-group">
              <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
-                <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" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
-                <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>
@@ -3,7 +3,6 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { Group } from 'src/app/data/group'
 import { User } from 'src/app/data/user'
@@ -41,7 +40,6 @@ describe('UsersAndGroupsComponent', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
-      imports: [NgxBootstrapIconsModule.pick(allIcons)],
      providers: [
        CustomDatePipe,
        DatePipe,
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, first, takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { Group } from 'src/app/data/group'
 import { User } from 'src/app/data/user'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -29,7 +29,7 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
  imports: [
    PageHeaderComponent,
    IfPermissionsDirective,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
  ],
 })
 export class UsersAndGroupsComponent
@@ -2,7 +2,7 @@
  <button class="navbar-toggler d-md-none collapsed border-0" type="button" data-toggle="collapse"
    data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
    (click)="closeMobileSearch(); toggleMenuCollapsed()">
-    <i-bs width="1.5em" height="1.5em" name="list"></i-bs>
+    <pngx-bs-icon width="1.5em" height="1.5em" name="list"></pngx-bs-icon>
  </button>
  <div class="navbar-brand-container order-sm-0">
    <a class="navbar-brand d-flex align-items-center me-0 ps-md-3 py-0"
@@ -34,7 +34,7 @@
      <div *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Document }" class="btn-group header-upload-group flex-shrink-0">
        <button class="btn btn-sm header-upload border-0 d-flex align-items-center justify-content-center py-0 px-2" type="button"
          (click)="fileUpload.click()" aria-label="Upload documents" i18n-aria-label>
-          <i-bs class="d-flex" width="1.1em" height="1.1em" name="file-earmark-arrow-up"></i-bs><span class="ms-2 d-sm-none d-md-inline" i18n>Upload</span>
+          <pngx-bs-icon class="d-flex" width="1.1em" height="1.1em" name="file-earmark-arrow-up"></pngx-bs-icon><span class="ms-2 d-sm-none d-md-inline" i18n>Upload</span>
        </button>
        @if (uploadsInProgress > 0) {
          <button class="btn btn-sm header-upload border-0 d-flex align-items-center py-0 px-2" type="button"
@@ -52,7 +52,7 @@
    <pngx-toasts-dropdown></pngx-toasts-dropdown>
    <li ngbDropdown class="nav-item dropdown">
      <button class="btn navbar-action border-0 me-1 me-md-2" id="userDropdown" ngbDropdownToggle aria-label="User menu" i18n-aria-label>
-        <i-bs width="1.3em" height="1.3em" name="person-circle"></i-bs>
+        <pngx-bs-icon width="1.3em" height="1.3em" name="person-circle"></pngx-bs-icon>
        <span class="small ms-2 d-none d-sm-inline">
          {{this.settingsService.displayName}}
        </span>
@@ -63,19 +63,19 @@
          <div class="dropdown-divider"></div>
        </div>
        <button ngbDropdownItem class="nav-link" (click)="editProfile()">
-          <i-bs class="me-2" name="person"></i-bs><ng-container i18n>My Profile</ng-container>
+          <pngx-bs-icon class="me-2" name="person"></pngx-bs-icon><ng-container i18n>My Profile</ng-container>
        </button>
        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()"
          *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }">
-          <i-bs class="me-2" name="gear"></i-bs><ng-container i18n>Settings</ng-container>
+          <pngx-bs-icon class="me-2" name="gear"></pngx-bs-icon><ng-container i18n>Settings</ng-container>
        </a>
        <a ngbDropdownItem class="nav-link d-flex" href="accounts/logout/" (click)="onLogout()">
-          <i-bs class="me-2" name="door-open"></i-bs><ng-container i18n>Logout</ng-container>
+          <pngx-bs-icon class="me-2" name="door-open"></pngx-bs-icon><ng-container i18n>Logout</ng-container>
        </a>
        <div class="dropdown-divider"></div>
        <a ngbDropdownItem class="nav-link" target="_blank" rel="noopener noreferrer"
          href="https://docs.paperless-ngx.com">
-          <i-bs class="me-2" name="question-circle"></i-bs><ng-container i18n>Documentation</ng-container>
+          <pngx-bs-icon class="me-2" name="question-circle"></pngx-bs-icon><ng-container i18n>Documentation</ng-container>
        </a>
      </div>
    </li>
@@ -93,9 +93,9 @@
      @if (canSaveSettings) {
        <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()" [aria-label]="slimSidebarEnabled ? 'Expand sidebar' : 'Collapse sidebar'" i18n-aria-label>
          @if (slimSidebarEnabled) {
-            <i-bs width="0.9em" height="0.9em" name="chevron-double-right"></i-bs>
+            <pngx-bs-icon width="0.9em" height="0.9em" name="chevron-double-right"></pngx-bs-icon>
          } @else {
-            <i-bs width="0.9em" height="0.9em" name="chevron-double-left"></i-bs>
+            <pngx-bs-icon width="0.9em" height="0.9em" name="chevron-double-left"></pngx-bs-icon>
          }
        </button>
      }
@@ -105,7 +105,7 @@
            <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Dashboard)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
              ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <i-bs class="me-2" name="house"></i-bs><span class="nav-link-label"><ng-container i18n>Dashboard</ng-container></span>
+              <pngx-bs-icon class="me-2" name="house"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Dashboard</ng-container></span>
            </a>
            @if (settingsService.organizingSidebarItems()) {
              <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Dashboard" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Dashboard)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Dashboard, $event)"></pngx-input-switch>
@@ -117,7 +117,7 @@
              (click)="closeMenu()"
              ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <i-bs class="me-2" name="files"></i-bs><span class="nav-link-label"><ng-container i18n>Documents</ng-container></span>
+              <pngx-bs-icon class="me-2" name="files"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Documents</ng-container></span>
            </a>
          </li>
        </ul>
@@ -136,7 +136,7 @@
                    routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
                    [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
                    popoverClass="popover-slim">
-                    <i-bs class="me-2" [name]="view.icon || 'funnel'"></i-bs><span><div class="d-inline-flex view-name"><span class="overflow-hidden" [class.text-wrap]="!slimSidebarEnabled">{{view.name}}</span></div>
+                    <pngx-bs-icon class="me-2" [name]="view.icon || 'funnel'"></pngx-bs-icon><span><div class="d-inline-flex view-name"><span class="overflow-hidden" [class.text-wrap]="!slimSidebarEnabled">{{view.name}}</span></div>
                        @if (showSidebarCounts && !slimSidebarEnabled) {
                          <span class="badge bg-info text-dark ms-2 d-inline">{{ savedViewService.getDocumentCount(view) }}</span>
                        }
@@ -147,7 +147,7 @@
                  </a>
                  @if (settingsService.organizingSidebarSavedViews() && canSaveSettings) {
                    <div class="position-absolute end-0 top-0 px-1 py-2" [class.me-n2]="slimSidebarEnabled" cdkDragHandle>
-                      <i-bs name="grip-vertical"></i-bs>
+                      <pngx-bs-icon name="grip-vertical"></pngx-bs-icon>
                    </div>
                  }
                </li>
@@ -174,10 +174,10 @@
                  routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle"
                  [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
                  popoverClass="popover-slim">
-                  <i-bs class="me-2" name="file-text"></i-bs><span>{{d.title | documentTitle}}</span>
+                  <pngx-bs-icon class="me-2" name="file-text"></pngx-bs-icon><span>{{d.title | documentTitle}}</span>
                  <span class="close flex-column justify-content-center"
                    (click)="$event.preventDefault(); $event.stopPropagation(); closeDocument(d)">
-                    <i-bs name="x"></i-bs>
+                    <pngx-bs-icon name="x"></pngx-bs-icon>
                  </span>
                </a>
              </li>
@@ -188,7 +188,7 @@
                  [class.text-truncate]="!slimSidebarEnabled" (click)="closeAll()"
                  ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                  container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                  <i-bs class="me-2" name="x"></i-bs><span class="nav-link-label"><ng-container i18n>Close all</ng-container></span>
+                  <pngx-bs-icon class="me-2" name="x"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Close all</ng-container></span>
                </button>
              </li>
            }
@@ -207,7 +207,7 @@
                    [routerLinkActiveOptions]="{ exact: !(slimSidebarEnabled || attributesSectionsCollapsed) }" (click)="closeMenu()"
                    ngbPopover="Attributes" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                    container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                    <i-bs name="stack"></i-bs><span class="nav-link-label ms-2"><ng-container i18n>Attributes</ng-container></span>
+                    <pngx-bs-icon name="stack"></pngx-bs-icon><span class="nav-link-label ms-2"><ng-container i18n>Attributes</ng-container></span>
                  </a>
                  @if (!slimSidebarEnabled && canSaveSettings) {
                    <button
@@ -217,7 +217,7 @@
                      [attr.aria-label]="attributesSectionsCollapsed ? 'Expand attributes sections' : 'Collapse attributes sections'"
                      i18n-aria-label
                    >
-                      <i-bs [name]="attributesSectionsCollapsed ? 'plus-circle' : 'dash-circle'"></i-bs>
+                      <pngx-bs-icon [name]="attributesSectionsCollapsed ? 'plus-circle' : 'dash-circle'"></pngx-bs-icon>
                    </button>
                  }
                </div>
@@ -228,27 +228,27 @@
                  <ul class="nav flex-column">
                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }">
                      <a class="nav-link" routerLink="attributes/tags" routerLinkActive="active" (click)="closeMenu()">
-                        <i-bs class="me-2" name="tags"></i-bs><span class="nav-link-label"><ng-container i18n>Tags</ng-container></span>
+                        <pngx-bs-icon class="me-2" name="tags"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Tags</ng-container></span>
                      </a>
                    </li>
                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
                      <a class="nav-link" routerLink="attributes/correspondents" routerLinkActive="active" (click)="closeMenu()">
-                        <i-bs class="me-2" name="person"></i-bs><span class="nav-link-label"><ng-container i18n>Correspondents</ng-container></span>
+                        <pngx-bs-icon class="me-2" name="person"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Correspondents</ng-container></span>
                      </a>
                    </li>
                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
                      <a class="nav-link" routerLink="attributes/documenttypes" routerLinkActive="active" (click)="closeMenu()">
-                        <i-bs class="me-2" name="hash"></i-bs><span class="nav-link-label"><ng-container i18n>Document types</ng-container></span>
+                        <pngx-bs-icon class="me-2" name="hash"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Document types</ng-container></span>
                      </a>
                    </li>
                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
                      <a class="nav-link" routerLink="attributes/storagepaths" routerLinkActive="active" (click)="closeMenu()">
-                        <i-bs class="me-2" name="folder"></i-bs><span class="nav-link-label"><ng-container i18n>Storage paths</ng-container></span>
+                        <pngx-bs-icon class="me-2" name="folder"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Storage paths</ng-container></span>
                      </a>
                    </li>
                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
                      <a class="nav-link" routerLink="attributes/customfields" routerLinkActive="active" (click)="closeMenu()">
-                        <i-bs class="me-2" name="ui-radios"></i-bs><span class="nav-link-label"><ng-container i18n>Custom fields</ng-container></span>
+                        <pngx-bs-icon class="me-2" name="ui-radios"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Custom fields</ng-container></span>
                      </a>
                    </li>
                  </ul>
@@ -259,7 +259,7 @@
              <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.SavedViews)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="savedviews" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="Saved Views" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-2" name="window-stack"></i-bs><span class="nav-link-label"><ng-container i18n>Saved Views</ng-container></span>
+                <pngx-bs-icon class="me-2" name="window-stack"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Saved Views</ng-container></span>
              </a>
              @if (settingsService.organizingSidebarItems()) {
                <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Saved Views" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.SavedViews)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.SavedViews, $event)"></pngx-input-switch>
@@ -270,7 +270,7 @@
                <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.ShareLinks)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="share-links" routerLinkActive="active" (click)="closeMenu()"
                  ngbPopover="Share links" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                  container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                  <i-bs class="me-2" name="link"></i-bs><span class="nav-link-label"><ng-container i18n>Share links</ng-container></span>
+                  <pngx-bs-icon class="me-2" name="link"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Share links</ng-container></span>
                </a>
                @if (settingsService.organizingSidebarItems()) {
                  <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Share Links" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.ShareLinks)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.ShareLinks, $event)"></pngx-input-switch>
@@ -283,7 +283,7 @@
              <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Workflows)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="workflows" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="Workflows" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-2" name="boxes"></i-bs><span class="nav-link-label"><ng-container i18n>Workflows</ng-container></span>
+                <pngx-bs-icon class="me-2" name="boxes"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Workflows</ng-container></span>
              </a>
              @if (settingsService.organizingSidebarItems()) {
                <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Workflows" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Workflows)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Workflows, $event)"></pngx-input-switch>
@@ -294,7 +294,7 @@
              <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Mail)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
                i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-2" name="envelope"></i-bs><span class="nav-link-label"><ng-container i18n>Mail</ng-container></span>
+                <pngx-bs-icon class="me-2" name="envelope"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Mail</ng-container></span>
              </a>
              @if (settingsService.organizingSidebarItems()) {
                <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Mail" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Mail)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Mail, $event)"></pngx-input-switch>
@@ -304,7 +304,7 @@
              <a class="nav-link" routerLink="trash" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Trash"
                i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-2" name="trash"></i-bs><span class="nav-link-label"><ng-container i18n>Trash</ng-container></span>
+                <pngx-bs-icon class="me-2" name="trash"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Trash</ng-container></span>
              </a>
            </li>
          </ul>
@@ -320,21 +320,21 @@
              <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-2" name="gear"></i-bs><span class="nav-link-label"><ng-container i18n>Settings</ng-container></span>
+                <pngx-bs-icon class="me-2" name="gear"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Settings</ng-container></span>
              </a>
            </li>
            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.AppConfig }">
              <a class="nav-link" routerLink="config" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="Configuration" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-2" name="sliders2-vertical"></i-bs><span class="nav-link-label"><ng-container i18n>Configuration</ng-container></span>
+                <pngx-bs-icon class="me-2" name="sliders2-vertical"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Configuration</ng-container></span>
              </a>
            </li>
            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
              <a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-2" name="people"></i-bs><span class="nav-link-label"><ng-container i18n>Users & Groups</ng-container></span>
+                <pngx-bs-icon class="me-2" name="people"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Users & Groups</ng-container></span>
              </a>
            </li>
            <li class="nav-item app-link"
@@ -343,7 +343,7 @@
              <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()"
                ngbPopover="Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-2" name="list-task"></i-bs><span class="nav-link-label"><ng-container i18n>Tasks</ng-container></span>
+                <pngx-bs-icon class="me-2" name="list-task"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Tasks</ng-container></span>
                @if (tasksService.needsAttentionTasksCount > 0 && !slimSidebarEnabled) {
                  <span class="badge bg-danger ms-2 d-inline flex-shrink-0">{{tasksService.needsAttentionTasksCount}}</span>
                }
@@ -357,7 +357,7 @@
                <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs"
                  i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
                  triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                  <i-bs class="me-2" name="text-left"></i-bs><span class="nav-link-label"><ng-container i18n>Logs</ng-container></span>
+                  <pngx-bs-icon class="me-2" name="text-left"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Logs</ng-container></span>
                </a>
              </li>
            }
@@ -366,7 +366,7 @@
                target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
                i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="d-flex me-2" name="question-circle"></i-bs><span><ng-container i18n>Documentation</ng-container></span>
+                <pngx-bs-icon class="d-flex me-2" name="question-circle"></pngx-bs-icon><span><ng-container i18n>Documentation</ng-container></span>
              </a>
              @if (settingsService.organizingSidebarItems()) {
                <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Documentation" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Documentation)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Documentation, $event)"></pngx-input-switch>
@@ -408,7 +408,7 @@
                          href="https://github.com/paperless-ngx/paperless-ngx/releases"
                          [ngbPopover]="updateAvailablePopContent" popoverClass="shadow" triggers="mouseenter:mouseleave"
                          container="body">
-                          <i-bs width="1.2em" height="1.2em" name="info-circle" class="me-1"></i-bs>
+                          <pngx-bs-icon width="1.2em" height="1.2em" name="info-circle" class="me-1"></pngx-bs-icon>
                          @if (appRemoteVersion()?.update_available) {
                            <ng-container i18n>Update available</ng-container>
                          }
@@ -418,7 +418,7 @@
                      <a  *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" class="small text-decoration-none" routerLink="/settings" fragment="update-checking" aria-label="Configure update checking" i18n-aria-label
                        [ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter"
                        container="body">
-                        <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
+                        <pngx-bs-icon width="1.2em" height="1.2em" name="info-circle"></pngx-bs-icon>
                      </a>
                    }
                  </div>
@@ -142,7 +142,7 @@ main {
      padding-left: 0;
      padding-right: 0;

-      i-bs {
+      pngx-bs-icon {
        margin-right: 0 !important;
      }
    }
@@ -268,7 +268,7 @@ main {
    }
  }

-  i-bs {
+  pngx-bs-icon {
    position: relative;
    top: -1px;
  }
@@ -279,7 +279,7 @@ main {
  align-items: center;
  min-width: 0;

-  > i-bs {
+  > pngx-bs-icon {
    flex: 0 0 auto;
  }

@@ -373,11 +373,11 @@ main {
    width: 1.8rem;
    height: 100%;

-    i-bs {
+    pngx-bs-icon {
      opacity: 0.5;
    }

-    &:hover i-bs {
+    &:hover pngx-bs-icon {
      opacity: 1;
    }
  }
@@ -392,7 +392,7 @@ main {
      text-decoration: underline;
    }

-    i-bs {
+    pngx-bs-icon {
      margin-bottom: 2px;
    }
  }
@@ -665,7 +665,7 @@ main {
 .navbar .dropdown-menu {
  font-size: 0.875rem; // body size

-  a i-bs, button i-bs {
+  a pngx-bs-icon, button pngx-bs-icon {
    opacity: 0.6;
  }
 }
@@ -693,7 +693,7 @@ main {
  cursor: move;
 }

-::ng-deep .navItemDrag .position-absolute i-bs {
+::ng-deep .navItemDrag .position-absolute pngx-bs-icon {
  display: none;
 }

@@ -10,7 +10,6 @@ import { BrowserModule, By } from '@angular/platform-browser'
 import { ActivatedRoute, Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModal, NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
@@ -108,7 +107,6 @@ describe('AppFrameComponent', () => {
        ReactiveFormsModule,
        DragDropModule,
        NgbModalModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        AppFrameComponent,
        IfPermissionsDirective,
        GlobalSearchComponent,
@@ -23,10 +23,10 @@ import {
  NgbNavModule,
  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
 import { Observable } from 'rxjs'
 import { first } from 'rxjs/operators'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { Document } from 'src/app/data/document'
 import { SavedView } from 'src/app/data/saved-view'
 import {
@@ -89,7 +89,7 @@ const SCROLL_THRESHOLD = 16
    NgbPopoverModule,
    NgbCollapseModule,
    NgbNavModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
    DragDropModule,
    TourNgBootstrap,
    FormsModule,
@@ -1,7 +1,7 @@

 <div ngbDropdown #resultsDropdown="ngbDropdown" (openChange)="onDropdownOpenChange">
    <form class="form-inline position-relative">
-        <i-bs width="1em" height="1em" name="search"></i-bs>
+        <pngx-bs-icon width="1em" height="1em" name="search"></pngx-bs-icon>
        <div class="input-group">
            <div class="form-control form-control-sm">
                <input class="bg-transparent border-0 w-100 h-100" #searchInput type="text" name="query"
@@ -25,7 +25,7 @@
                    } @else {
                        <ng-container i18n>Search</ng-container>
                    }
-                    <i-bs width="1em" height="1em" name="arrow-right-short"></i-bs>
+                    <pngx-bs-icon width="1em" height="1em" name="arrow-right-short"></pngx-bs-icon>
                </button>
            }
        </div>
@@ -35,7 +35,7 @@
        <div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" tabindex="-1"
        (click)="primaryAction(type, item, $event)"
        (mouseenter)="onItemHover($event)">
-            <i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
+            <pngx-bs-icon width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></pngx-bs-icon>
            <div class="text-truncate">
                {{item[nameProp]}}
                @if (date) {
@@ -49,13 +49,13 @@
                [disabled]="disablePrimaryButton(type, item)"
                (mouseenter)="onButtonHover($event)">
                    @if (type === DataType.Document) {
-                        <i-bs width="1em" height="1em" name="file-earmark-richtext" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
+                        <pngx-bs-icon width="1em" height="1em" name="file-earmark-richtext" class="me-1"></pngx-bs-icon><span><ng-container i18n>Open</ng-container></span>
                    } @else if (type === DataType.SavedView) {
-                        <i-bs width="1em" height="1em" name="eye" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
+                        <pngx-bs-icon width="1em" height="1em" name="eye" class="me-1"></pngx-bs-icon><span><ng-container i18n>Open</ng-container></span>
                    } @else if (type === DataType.Workflow || type === DataType.CustomField || type === DataType.Group || type === DataType.User || type === DataType.MailAccount || type === DataType.MailRule) {
-                        <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
+                        <pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><span><ng-container i18n>Open</ng-container></span>
                    } @else {
-                        <i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><span><ng-container i18n>Filter documents</ng-container></span>
+                        <pngx-bs-icon width="1em" height="1em" name="filter" class="me-1"></pngx-bs-icon><span><ng-container i18n>Filter documents</ng-container></span>
                    }
                </button>
                @if (type !== DataType.SavedView && type !== DataType.Workflow && type !== DataType.CustomField && type !== DataType.Group && type !== DataType.User && type !== DataType.MailAccount && type !== DataType.MailRule) {
@@ -65,9 +65,9 @@
                    [disabled]="disableSecondaryButton(type, item)"
                    (mouseenter)="onButtonHover($event)">
                        @if (type === DataType.Document) {
-                            <i-bs width="1em" height="1em" name="download" class="me-1"></i-bs><span><ng-container i18n>Download</ng-container></span>
+                            <pngx-bs-icon width="1em" height="1em" name="download" class="me-1"></pngx-bs-icon><span><ng-container i18n>Download</ng-container></span>
                        } @else {
-                            <i-bs width="1em" height="1em" name="file-earmark-richtext" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
+                            <pngx-bs-icon width="1em" height="1em" name="file-earmark-richtext" class="me-1"></pngx-bs-icon><span><ng-container i18n>Open</ng-container></span>
                        }
                    </button>
                }
@@ -1,7 +1,7 @@
 form {
  position: relative;

-  > i-bs[name="search"] {
+  > pngx-bs-icon[name="search"] {
    position: absolute;
    left: 0.6rem;
    top: .25rem;
@@ -14,7 +14,7 @@ form {
  }

  &:focus-within {
-    i-bs[name="search"],
+    pngx-bs-icon[name="search"],
    .badge {
      display: none !important;
    }
@@ -72,7 +72,7 @@ form {

 .dropdown.show {
  // Hide the search icon when the dropdown is shown
-  i-bs[name="search"] {
+  pngx-bs-icon[name="search"] {
    display: none !important;
  }

@@ -10,7 +10,6 @@ import {
  NgbModalModule,
  NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { DataType } from 'src/app/data/datatype'
 import {
@@ -138,7 +137,6 @@ describe('GlobalSearchComponent', () => {
        NgbDropdownModule,
        FormsModule,
        ReactiveFormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        GlobalSearchComponent,
      ],
      providers: [
@@ -17,8 +17,8 @@ import {
  NgbModal,
  NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, debounceTime, distinctUntilChanged, filter } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { DataType } from 'src/app/data/datatype'
 import {
  FILTER_FULLTEXT_QUERY,
@@ -65,7 +65,7 @@ import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-e
    CustomDatePipe,
    FormsModule,
    ReactiveFormsModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
    NgbDropdownModule,
    NgTemplateOutlet,
  ],
@@ -4,7 +4,7 @@
    <span class="notification-count badge rounded-pill z-3 pe-none position-absolute" [class.bg-danger]="hasUnreadError()" [class.bg-secondary]="!hasUnreadError()">{{ unread().length }}</span>
  }
  <button class="btn navbar-action border-0" id="notificationsDropdown" ngbDropdownToggle aria-label="Notifications" i18n-aria-label>
-    <i-bs width="1.3em" height="1.3em" name="bell"></i-bs>
+    <pngx-bs-icon width="1.3em" height="1.3em" name="bell"></pngx-bs-icon>
  </button>
  <div ngbDropdownMenu class="dropdown-menu-end shadow p-2" aria-labelledby="notificationsDropdown">
    <div class="d-flex align-items-center px-1 mb-2">
@@ -12,13 +12,13 @@
      @if (toasts().length) {
        <button class="btn btn-link btn-sm p-0 ms-auto text-body-secondary text-decoration-none clear-all"
          (click)="toastService.clearToasts()">
-          <i-bs width="1em" height="1em" name="check2-all" class="me-1"></i-bs><ng-container i18n>Clear All</ng-container>
+          <pngx-bs-icon width="1em" height="1em" name="check2-all" class="me-1"></pngx-bs-icon><ng-container i18n>Clear All</ng-container>
        </button>
      }
    </div>
    @if (toasts().length === 0) {
      <div class="text-center text-body-secondary small py-4">
-        <i-bs width="1.5em" height="1.5em" name="bell" class="d-block mx-auto mb-2 opacity-50"></i-bs>
+        <pngx-bs-icon width="1.5em" height="1.5em" name="bell" class="d-block mx-auto mb-2 opacity-50"></pngx-bs-icon>
        <ng-container i18n>No notifications</ng-container>
      </div>
    }
@@ -1,7 +1,6 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { Subject } from 'rxjs'
 import { Toast, ToastLevel, ToastService } from 'src/app/services/toast.service'
 import { ToastsDropdownComponent } from './toasts-dropdown.component'
@@ -41,10 +40,7 @@ describe('ToastsDropdownComponent', () => {

  beforeEach(async () => {
    TestBed.configureTestingModule({
-      imports: [
-        ToastsDropdownComponent,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
+      imports: [ToastsDropdownComponent],
      providers: [
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
@@ -12,8 +12,8 @@ import {
  NgbDropdownModule,
  NgbProgressbarModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subscription, interval, map } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { Toast, ToastLevel, ToastService } from 'src/app/services/toast.service'
 import { ToastComponent } from '../../common/toast/toast.component'

@@ -25,7 +25,7 @@ import { ToastComponent } from '../../common/toast/toast.component'
    ToastComponent,
    NgbDropdownModule,
    NgbProgressbarModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
  ],
 })
 export class ToastsDropdownComponent {
@@ -1,11 +1,11 @@

 <li ngbDropdown class="nav-item" display="dynamic" placement="bottom-end" [popperOptions]="popperOptions" (openChange)="onOpenChange($event)">
  <button class="btn navbar-action border-0" id="chatDropdown" ngbDropdownToggle aria-label="Chat" i18n-aria-label>
-    <i-bs width="1.3em" height="1.3em" name="chatSquareDots"></i-bs>
+    <pngx-bs-icon width="1.3em" height="1.3em" name="chatSquareDots"></pngx-bs-icon>
  </button>
  <div ngbDropdownMenu class="dropdown-menu-end shadow p-0 overflow-hidden" aria-labelledby="chatDropdown">
    <div class="d-flex align-items-center border-bottom px-3 py-2">
-      <i-bs width="1em" height="1em" name="stars" class="text-primary me-2"></i-bs>
+      <pngx-bs-icon width="1em" height="1em" name="stars" class="text-primary me-2"></pngx-bs-icon>
      <span class="fw-semibold">
        @if (documentId()) {
          <ng-container i18n>Ask about this document</ng-container>
@@ -15,7 +15,7 @@
      </span>
      @if (messages().length) {
        <button class="btn btn-sm btn-link text-muted ms-auto p-0" type="button" (click)="clearChat()" title="Clear chat" i18n-title>
-          <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>
+          <pngx-bs-icon width="1em" height="1em" name="arrow-counterclockwise"></pngx-bs-icon>
        </button>
      }
    </div>
@@ -46,7 +46,7 @@
                <div class="list-group-item text-muted small py-1" i18n>Sources</div>
                @for (reference of message.references; track reference.id) {
                  <a class="list-group-item list-group-item-action d-flex align-items-center text-primary" [routerLink]="['/documents', reference.id]" [title]="reference.title">
-                    <i-bs width="0.9em" height="0.9em" name="file-text" class="me-2 flex-shrink-0"></i-bs><span class="text-truncate">{{ reference.title }}</span>
+                    <pngx-bs-icon width="0.9em" height="0.9em" name="file-text" class="me-2 flex-shrink-0"></pngx-bs-icon><span class="text-truncate">{{ reference.title }}</span>
                  </a>
                }
              </div>
@@ -72,11 +72,11 @@
          />
        @if (loading()) {
          <button class="btn btn-outline-secondary" type="button" (click)="stopStreaming()" title="Stop" i18n-title aria-label="Stop" i18n-aria-label>
-            <i-bs width="1em" height="1em" name="x-lg"></i-bs>
+            <pngx-bs-icon width="1em" height="1em" name="x-lg"></pngx-bs-icon>
          </button>
        } @else {
          <button class="btn btn-primary" type="button" (click)="sendMessage()" title="Send" i18n-title aria-label="Send" i18n-aria-label>
-            <i-bs width="1em" height="1em" name="arrow-return-left"></i-bs>
+            <pngx-bs-icon width="1em" height="1em" name="arrow-return-left"></pngx-bs-icon>
          </button>
        }
      </div>
@@ -4,7 +4,6 @@ import { ElementRef } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NavigationEnd, Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
-import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject } from 'rxjs'
 import {
  CHAT_METADATA_DELIMITER,
@@ -22,11 +21,7 @@ describe('ChatComponent', () => {

  beforeEach(async () => {
    TestBed.configureTestingModule({
-      imports: [
-        NgxBootstrapIconsModule.pick(allIcons),
-        RouterTestingModule,
-        ChatComponent,
-      ],
+      imports: [RouterTestingModule, ChatComponent],
      providers: [
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
@@ -9,8 +9,8 @@ import {
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NavigationEnd, Router, RouterModule } from '@angular/router'
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { filter, map, Subscription } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { MarkdownPipe } from 'src/app/pipes/markdown.pipe'
 import {
  ChatMessage,
@@ -27,7 +27,7 @@ const SLOW_RESPONSE_DELAY_MS = 8000
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
    NgbDropdownModule,
    MarkdownPipe,
  ],
@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { BootstrapIconComponent } from './bootstrap-icon.component'
+
+describe('BootstrapIconComponent', () => {
+  let fixture: ComponentFixture<BootstrapIconComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [BootstrapIconComponent],
+    })
+    fixture = TestBed.createComponent(BootstrapIconComponent)
+  })
+
+  it('should render the named icon as inline svg', () => {
+    fixture.componentRef.setInput('name', 'arrow-down-up')
+    fixture.detectChanges()
+    const svg: SVGElement = fixture.nativeElement.querySelector('svg')
+    expect(svg.classList).toContain('bi-arrow-down-up')
+    expect(svg.getAttribute('width')).toEqual('16')
+    expect(svg.getAttribute('height')).toEqual('16')
+  })
+
+  it('should apply width and height', () => {
+    fixture.componentRef.setInput('name', 'x-lg')
+    fixture.componentRef.setInput('width', '1.2em')
+    fixture.componentRef.setInput('height', 2)
+    fixture.detectChanges()
+    const svg: SVGElement = fixture.nativeElement.querySelector('svg')
+    expect(svg.getAttribute('width')).toEqual('1.2em')
+    expect(svg.getAttribute('height')).toEqual('2')
+  })
+
+  it('should not allow width or height to inject attributes', () => {
+    fixture.componentRef.setInput('name', 'x-lg')
+    fixture.componentRef.setInput('width', '1" onload="alert(1)')
+    fixture.componentRef.setInput('height', '1" onclick="alert(1)')
+    fixture.detectChanges()
+    const svg: SVGElement = fixture.nativeElement.querySelector('svg')
+    expect(svg.hasAttribute('onload')).toBe(false)
+    expect(svg.hasAttribute('onclick')).toBe(false)
+    expect(svg.getAttribute('width')).toEqual('1" onload="alert(1)')
+  })
+
+  it('should update when the name changes', () => {
+    fixture.componentRef.setInput('name', 'x-lg')
+    fixture.detectChanges()
+    fixture.componentRef.setInput('name', 'sliders2-vertical')
+    fixture.detectChanges()
+    expect(fixture.nativeElement.querySelector('svg').classList).toContain(
+      'bi-sliders2-vertical'
+    )
+  })
+
+  it('should render nothing and warn for an unregistered icon', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    fixture.componentRef.setInput('name', 'not-an-icon')
+    fixture.detectChanges()
+    expect(fixture.nativeElement.innerHTML).toEqual('')
+    expect(warnSpy).toHaveBeenCalledWith('Icon not found: not-an-icon')
+  })
+})
@@ -0,0 +1,54 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  ElementRef,
+  inject,
+  input,
+} from '@angular/core'
+import { icons } from './icons'
+
+/** Converts icon name e.g. `arrow-down-up` to its registry key. */
+const toKey = (name: string) =>
+  name.trim().replace(/-(.)/g, (_, char: string) => char.toUpperCase())
+
+/**
+ * Renders an icon from the official bootstrap-icons package as inline SVG.
+ * Icons must be registered in `./icons.ts`.
+ */
+@Component({
+  selector: 'pngx-bs-icon',
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BootstrapIconComponent {
+  private readonly elementRef = inject(ElementRef<HTMLElement>)
+
+  readonly name = input<string>()
+  readonly width = input<string | number>()
+  readonly height = input<string | number>()
+
+  constructor() {
+    effect(() => {
+      const element = this.elementRef.nativeElement
+      element.innerHTML = this.svg()
+      const svg = element.firstElementChild
+      if (!svg) return
+      const width = this.width()
+      const height = this.height()
+      if (width) svg.setAttribute('width', String(width))
+      if (height) svg.setAttribute('height', String(height))
+    })
+  }
+
+  private svg(): string {
+    const name = this.name()
+    if (!name) return ''
+    const svg = icons[toKey(name)]
+    if (!svg) {
+      console.warn(`Icon not found: ${name}`)
+      return ''
+    }
+    return svg
+  }
+}
@@ -0,0 +1,317 @@
+import airplane from 'bootstrap-icons/icons/airplane.svg'
+import archive from 'bootstrap-icons/icons/archive.svg'
+import arrowClockwise from 'bootstrap-icons/icons/arrow-clockwise.svg'
+import arrowCounterclockwise from 'bootstrap-icons/icons/arrow-counterclockwise.svg'
+import arrowDownUp from 'bootstrap-icons/icons/arrow-down-up.svg'
+import arrowDown from 'bootstrap-icons/icons/arrow-down.svg'
+import arrowLeft from 'bootstrap-icons/icons/arrow-left.svg'
+import arrowRepeat from 'bootstrap-icons/icons/arrow-repeat.svg'
+import arrowReturnLeft from 'bootstrap-icons/icons/arrow-return-left.svg'
+import arrowRightShort from 'bootstrap-icons/icons/arrow-right-short.svg'
+import arrowRight from 'bootstrap-icons/icons/arrow-right.svg'
+import arrowUpRight from 'bootstrap-icons/icons/arrow-up-right.svg'
+import asterisk from 'bootstrap-icons/icons/asterisk.svg'
+import bank from 'bootstrap-icons/icons/bank.svg'
+import basket from 'bootstrap-icons/icons/basket.svg'
+import bell from 'bootstrap-icons/icons/bell.svg'
+import bodyText from 'bootstrap-icons/icons/body-text.svg'
+import bookmark from 'bootstrap-icons/icons/bookmark.svg'
+import boxArrowInRight from 'bootstrap-icons/icons/box-arrow-in-right.svg'
+import boxArrowUpRight from 'bootstrap-icons/icons/box-arrow-up-right.svg'
+import boxArrowUp from 'bootstrap-icons/icons/box-arrow-up.svg'
+import boxes from 'bootstrap-icons/icons/boxes.svg'
+import braces from 'bootstrap-icons/icons/braces.svg'
+import briefcase from 'bootstrap-icons/icons/briefcase.svg'
+import building from 'bootstrap-icons/icons/building.svg'
+import calculator from 'bootstrap-icons/icons/calculator.svg'
+import calendarEventFill from 'bootstrap-icons/icons/calendar-event-fill.svg'
+import calendarEvent from 'bootstrap-icons/icons/calendar-event.svg'
+import calendar from 'bootstrap-icons/icons/calendar.svg'
+import camera from 'bootstrap-icons/icons/camera.svg'
+import cardChecklist from 'bootstrap-icons/icons/card-checklist.svg'
+import cardHeading from 'bootstrap-icons/icons/card-heading.svg'
+import caretDown from 'bootstrap-icons/icons/caret-down.svg'
+import caretUp from 'bootstrap-icons/icons/caret-up.svg'
+import cash from 'bootstrap-icons/icons/cash.svg'
+import chatLeftText from 'bootstrap-icons/icons/chat-left-text.svg'
+import chatSquareDots from 'bootstrap-icons/icons/chat-square-dots.svg'
+import checkAll from 'bootstrap-icons/icons/check-all.svg'
+import checkCircleFill from 'bootstrap-icons/icons/check-circle-fill.svg'
+import checkCircle from 'bootstrap-icons/icons/check-circle.svg'
+import checkLg from 'bootstrap-icons/icons/check-lg.svg'
+import check from 'bootstrap-icons/icons/check.svg'
+import check2All from 'bootstrap-icons/icons/check2-all.svg'
+import chevronDoubleLeft from 'bootstrap-icons/icons/chevron-double-left.svg'
+import chevronDoubleRight from 'bootstrap-icons/icons/chevron-double-right.svg'
+import chevronDown from 'bootstrap-icons/icons/chevron-down.svg'
+import chevronRight from 'bootstrap-icons/icons/chevron-right.svg'
+import chevronUp from 'bootstrap-icons/icons/chevron-up.svg'
+import circle from 'bootstrap-icons/icons/circle.svg'
+import clipboardCheckFill from 'bootstrap-icons/icons/clipboard-check-fill.svg'
+import clipboardCheck from 'bootstrap-icons/icons/clipboard-check.svg'
+import clipboardFill from 'bootstrap-icons/icons/clipboard-fill.svg'
+import clipboard from 'bootstrap-icons/icons/clipboard.svg'
+import clockHistory from 'bootstrap-icons/icons/clock-history.svg'
+import cpu from 'bootstrap-icons/icons/cpu.svg'
+import creditCard from 'bootstrap-icons/icons/credit-card.svg'
+import dashCircle from 'bootstrap-icons/icons/dash-circle.svg'
+import dash from 'bootstrap-icons/icons/dash.svg'
+import diagram3 from 'bootstrap-icons/icons/diagram-3.svg'
+import dice5 from 'bootstrap-icons/icons/dice-5.svg'
+import doorOpen from 'bootstrap-icons/icons/door-open.svg'
+import download from 'bootstrap-icons/icons/download.svg'
+import envelopeAtFill from 'bootstrap-icons/icons/envelope-at-fill.svg'
+import envelopeAt from 'bootstrap-icons/icons/envelope-at.svg'
+import envelope from 'bootstrap-icons/icons/envelope.svg'
+import exclamationCircleFill from 'bootstrap-icons/icons/exclamation-circle-fill.svg'
+import exclamationTriangleFill from 'bootstrap-icons/icons/exclamation-triangle-fill.svg'
+import exclamationTriangle from 'bootstrap-icons/icons/exclamation-triangle.svg'
+import eye from 'bootstrap-icons/icons/eye.svg'
+import fileEarmarkArrowUp from 'bootstrap-icons/icons/file-earmark-arrow-up.svg'
+import fileEarmarkCheck from 'bootstrap-icons/icons/file-earmark-check.svg'
+import fileEarmarkDiff from 'bootstrap-icons/icons/file-earmark-diff.svg'
+import fileEarmarkFill from 'bootstrap-icons/icons/file-earmark-fill.svg'
+import fileEarmarkLock from 'bootstrap-icons/icons/file-earmark-lock.svg'
+import fileEarmarkMedical from 'bootstrap-icons/icons/file-earmark-medical.svg'
+import fileEarmarkMinus from 'bootstrap-icons/icons/file-earmark-minus.svg'
+import fileEarmarkPerson from 'bootstrap-icons/icons/file-earmark-person.svg'
+import fileEarmarkPlus from 'bootstrap-icons/icons/file-earmark-plus.svg'
+import fileEarmarkRichtext from 'bootstrap-icons/icons/file-earmark-richtext.svg'
+import fileEarmarkSpreadsheet from 'bootstrap-icons/icons/file-earmark-spreadsheet.svg'
+import fileEarmark from 'bootstrap-icons/icons/file-earmark.svg'
+import fileText from 'bootstrap-icons/icons/file-text.svg'
+import files from 'bootstrap-icons/icons/files.svg'
+import filter from 'bootstrap-icons/icons/filter.svg'
+import floppy from 'bootstrap-icons/icons/floppy.svg'
+import folderFill from 'bootstrap-icons/icons/folder-fill.svg'
+import folder from 'bootstrap-icons/icons/folder.svg'
+import funnel from 'bootstrap-icons/icons/funnel.svg'
+import gear from 'bootstrap-icons/icons/gear.svg'
+import globe2 from 'bootstrap-icons/icons/globe2.svg'
+import google from 'bootstrap-icons/icons/google.svg'
+import grid from 'bootstrap-icons/icons/grid.svg'
+import gripVertical from 'bootstrap-icons/icons/grip-vertical.svg'
+import hash from 'bootstrap-icons/icons/hash.svg'
+import hddStack from 'bootstrap-icons/icons/hdd-stack.svg'
+import heart from 'bootstrap-icons/icons/heart.svg'
+import house from 'bootstrap-icons/icons/house.svg'
+import inbox from 'bootstrap-icons/icons/inbox.svg'
+import infoCircle from 'bootstrap-icons/icons/info-circle.svg'
+import journalBookmarkFill from 'bootstrap-icons/icons/journal-bookmark-fill.svg'
+import journals from 'bootstrap-icons/icons/journals.svg'
+import lightbulb from 'bootstrap-icons/icons/lightbulb.svg'
+import link from 'bootstrap-icons/icons/link.svg'
+import listNested from 'bootstrap-icons/icons/list-nested.svg'
+import listTask from 'bootstrap-icons/icons/list-task.svg'
+import listUl from 'bootstrap-icons/icons/list-ul.svg'
+import list from 'bootstrap-icons/icons/list.svg'
+import microsoft from 'bootstrap-icons/icons/microsoft.svg'
+import newspaper from 'bootstrap-icons/icons/newspaper.svg'
+import nodePlus from 'bootstrap-icons/icons/node-plus.svg'
+import paperclip from 'bootstrap-icons/icons/paperclip.svg'
+import pencil from 'bootstrap-icons/icons/pencil.svg'
+import peopleFill from 'bootstrap-icons/icons/people-fill.svg'
+import people from 'bootstrap-icons/icons/people.svg'
+import personCircle from 'bootstrap-icons/icons/person-circle.svg'
+import personFillLock from 'bootstrap-icons/icons/person-fill-lock.svg'
+import personFill from 'bootstrap-icons/icons/person-fill.svg'
+import personLock from 'bootstrap-icons/icons/person-lock.svg'
+import personSquare from 'bootstrap-icons/icons/person-square.svg'
+import person from 'bootstrap-icons/icons/person.svg'
+import playFill from 'bootstrap-icons/icons/play-fill.svg'
+import plusCircle from 'bootstrap-icons/icons/plus-circle.svg'
+import plus from 'bootstrap-icons/icons/plus.svg'
+import printer from 'bootstrap-icons/icons/printer.svg'
+import questionCircle from 'bootstrap-icons/icons/question-circle.svg'
+import receipt from 'bootstrap-icons/icons/receipt.svg'
+import safe from 'bootstrap-icons/icons/safe.svg'
+import scissors from 'bootstrap-icons/icons/scissors.svg'
+import search from 'bootstrap-icons/icons/search.svg'
+import send from 'bootstrap-icons/icons/send.svg'
+import shop from 'bootstrap-icons/icons/shop.svg'
+import slashCircle from 'bootstrap-icons/icons/slash-circle.svg'
+import sliders2Vertical from 'bootstrap-icons/icons/sliders2-vertical.svg'
+import sortAlphaDown from 'bootstrap-icons/icons/sort-alpha-down.svg'
+import sortAlphaUpAlt from 'bootstrap-icons/icons/sort-alpha-up-alt.svg'
+import stack from 'bootstrap-icons/icons/stack.svg'
+import stars from 'bootstrap-icons/icons/stars.svg'
+import tagFill from 'bootstrap-icons/icons/tag-fill.svg'
+import tag from 'bootstrap-icons/icons/tag.svg'
+import tags from 'bootstrap-icons/icons/tags.svg'
+import telephone from 'bootstrap-icons/icons/telephone.svg'
+import textIndentLeft from 'bootstrap-icons/icons/text-indent-left.svg'
+import textLeft from 'bootstrap-icons/icons/text-left.svg'
+import threeDotsVertical from 'bootstrap-icons/icons/three-dots-vertical.svg'
+import threeDots from 'bootstrap-icons/icons/three-dots.svg'
+import trash from 'bootstrap-icons/icons/trash.svg'
+import truck from 'bootstrap-icons/icons/truck.svg'
+import uiRadios from 'bootstrap-icons/icons/ui-radios.svg'
+import unlock from 'bootstrap-icons/icons/unlock.svg'
+import upcScan from 'bootstrap-icons/icons/upc-scan.svg'
+import wallet2 from 'bootstrap-icons/icons/wallet2.svg'
+import windowStack from 'bootstrap-icons/icons/window-stack.svg'
+import xCircle from 'bootstrap-icons/icons/x-circle.svg'
+import xLg from 'bootstrap-icons/icons/x-lg.svg'
+import x from 'bootstrap-icons/icons/x.svg'
+
+/**
+ * `<pngx-bs-icon>`. Only icons registered here are bundled but can add
+ * new ones (any icon from the bootstrap-icons package) as needed.
+ */
+export const icons: Record<string, string> = {
+  airplane,
+  archive,
+  arrowClockwise,
+  arrowCounterclockwise,
+  arrowDown,
+  arrowDownUp,
+  arrowLeft,
+  arrowRepeat,
+  arrowReturnLeft,
+  arrowRight,
+  arrowRightShort,
+  arrowUpRight,
+  asterisk,
+  bank,
+  basket,
+  bell,
+  braces,
+  bodyText,
+  bookmark,
+  boxArrowInRight,
+  boxArrowUp,
+  boxArrowUpRight,
+  boxes,
+  briefcase,
+  building,
+  calculator,
+  calendar,
+  calendarEvent,
+  calendarEventFill,
+  camera,
+  cardChecklist,
+  cardHeading,
+  caretDown,
+  caretUp,
+  chatLeftText,
+  chatSquareDots,
+  check,
+  check2All,
+  checkAll,
+  checkCircle,
+  checkCircleFill,
+  checkLg,
+  chevronDoubleLeft,
+  chevronDoubleRight,
+  chevronDown,
+  chevronRight,
+  chevronUp,
+  circle,
+  clipboard,
+  clipboardCheck,
+  clipboardCheckFill,
+  clipboardFill,
+  clockHistory,
+  cpu,
+  cash,
+  creditCard,
+  dash,
+  dashCircle,
+  diagram3,
+  dice5,
+  doorOpen,
+  download,
+  envelope,
+  envelopeAt,
+  envelopeAtFill,
+  exclamationCircleFill,
+  exclamationTriangle,
+  exclamationTriangleFill,
+  eye,
+  fileEarmark,
+  fileEarmarkArrowUp,
+  fileEarmarkCheck,
+  fileEarmarkDiff,
+  fileEarmarkFill,
+  fileEarmarkLock,
+  fileEarmarkMedical,
+  fileEarmarkMinus,
+  fileEarmarkPerson,
+  fileEarmarkPlus,
+  fileEarmarkRichtext,
+  fileEarmarkSpreadsheet,
+  files,
+  fileText,
+  filter,
+  floppy,
+  folder,
+  folderFill,
+  funnel,
+  gear,
+  globe2,
+  google,
+  grid,
+  gripVertical,
+  hash,
+  hddStack,
+  heart,
+  house,
+  inbox,
+  infoCircle,
+  journalBookmarkFill,
+  journals,
+  lightbulb,
+  link,
+  list,
+  listNested,
+  listTask,
+  listUl,
+  microsoft,
+  newspaper,
+  nodePlus,
+  pencil,
+  paperclip,
+  people,
+  peopleFill,
+  person,
+  personCircle,
+  personFill,
+  personFillLock,
+  personLock,
+  personSquare,
+  playFill,
+  plus,
+  plusCircle,
+  printer,
+  questionCircle,
+  receipt,
+  safe,
+  scissors,
+  search,
+  send,
+  slashCircle,
+  shop,
+  sliders2Vertical,
+  sortAlphaDown,
+  sortAlphaUpAlt,
+  stack,
+  stars,
+  tagFill,
+  tag,
+  tags,
+  textIndentLeft,
+  textLeft,
+  telephone,
+  threeDots,
+  threeDotsVertical,
+  trash,
+  truck,
+  uiRadios,
+  unlock,
+  upcScan,
+  wallet2,
+  windowStack,
+  x,
+  xCircle,
+  xLg,
+}
@@ -1,11 +1,11 @@
@if (active()) {
  <button class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-pill p-1" title="Clear" i18n-title (click)="onClick($event)">
    @if (!isNumbered() && selected()) {
-      <i-bs class="check" width="1em" height="1em" name="check-lg"></i-bs>
+      <pngx-bs-icon class="check" width="1em" height="1em" name="check-lg"></pngx-bs-icon>
    }
    @if (isNumbered()) {
      <div class="number">{{number()}}<span class="visually-hidden">selected</span></div>
    }
-    <i-bs class="x" width=".9em" height="1em" name="x-lg"></i-bs>
+    <pngx-bs-icon class="x" width=".9em" height="1em" name="x-lg"></pngx-bs-icon>
  </button>
 }
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { ClearableBadgeComponent } from './clearable-badge.component'

 describe('ClearableBadgeComponent', () => {
@@ -8,10 +7,7 @@ describe('ClearableBadgeComponent', () => {

  beforeEach(async () => {
    TestBed.configureTestingModule({
-      imports: [
-        NgxBootstrapIconsModule.pick(allIcons),
-        ClearableBadgeComponent,
-      ],
+      imports: [ClearableBadgeComponent],
    }).compileComponents()

    fixture = TestBed.createComponent(ClearableBadgeComponent)
@@ -1,11 +1,11 @@
 import { Component, computed, EventEmitter, input, Output } from '@angular/core'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'

@Component({
  selector: 'pngx-clearable-badge',
  templateUrl: './clearable-badge.component.html',
  styleUrls: ['./clearable-badge.component.scss'],
-  imports: [NgxBootstrapIconsModule],
+  imports: [BootstrapIconComponent],
 })
 export class ClearableBadgeComponent {
  readonly number = input<number>(undefined)
@@ -10,7 +10,7 @@
    popoverClass="popover-slim"
 >
    @if (iconName) {
-        <i-bs [class.me-1]="label" name="{{iconName}}"></i-bs>
+        <pngx-bs-icon [class.me-1]="label" name="{{iconName}}"></pngx-bs-icon>
    }
    <ng-container>{{label}}</ng-container>
 </button>
@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'

 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { ConfirmButtonComponent } from './confirm-button.component'

 describe('ConfirmButtonComponent', () => {
@@ -10,11 +9,7 @@ describe('ConfirmButtonComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [
-        NgbPopoverModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-        ConfirmButtonComponent,
-      ],
+      imports: [NgbPopoverModule, ConfirmButtonComponent],
    }).compileComponents()

    fixture = TestBed.createComponent(ConfirmButtonComponent)
@@ -6,13 +6,13 @@ import {
  ViewChild,
 } from '@angular/core'
 import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'

@Component({
  selector: 'pngx-confirm-button',
  templateUrl: './confirm-button.component.html',
  styleUrl: './confirm-button.component.scss',
-  imports: [NgbPopoverModule, NgxBootstrapIconsModule],
+  imports: [NgbPopoverModule, BootstrapIconComponent],
 })
 export class ConfirmButtonComponent {
  @Input()
@@ -22,7 +22,7 @@
        @let document = getDocument(documentID);
        @if (document) {
          <li class="list-group-item d-flex align-items-center" cdkDrag>
-            <i-bs name="grip-vertical" class="me-2"></i-bs>
+            <pngx-bs-icon name="grip-vertical" class="me-2"></pngx-bs-icon>
            <div class="d-flex flex-column">
              <div>
                @if (document.correspondent) {
@@ -2,7 +2,6 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { MergeAsVersionsConfirmDialogComponent } from './merge-as-versions-confirm-dialog.component'
@@ -14,10 +13,7 @@ describe('MergeAsVersionsConfirmDialogComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [
-        NgxBootstrapIconsModule.pick(allIcons),
-        MergeAsVersionsConfirmDialogComponent,
-      ],
+      imports: [MergeAsVersionsConfirmDialogComponent],
      providers: [
        NgbActiveModal,
        provideHttpClient(withInterceptorsFromDi()),
@@ -6,8 +6,8 @@ import {
 import { AsyncPipe } from '@angular/common'
 import { Component, OnInit, computed, inject, signal } from '@angular/core'
 import { FormsModule } from '@angular/forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { Document } from 'src/app/data/document'
 import { CorrespondentNamePipe } from 'src/app/pipes/correspondent-name.pipe'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
@@ -24,7 +24,7 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
    CustomDatePipe,
    DragDropModule,
    FormsModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
  ],
 })
 export class MergeAsVersionsConfirmDialogComponent
@@ -15,7 +15,7 @@
              @let document = getDocument(documentID);
              @if (document) {
                <li class="list-group-item d-flex align-items-center" cdkDrag>
-                    <i-bs name="grip-vertical" class="me-2"></i-bs>
+                    <pngx-bs-icon name="grip-vertical" class="me-2"></pngx-bs-icon>
                    <div class="d-flex flex-column">
                        <div>
                          @if (document.correspondent) {
@@ -3,7 +3,6 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { MergeConfirmDialogComponent } from './merge-confirm-dialog.component'
@@ -15,12 +14,7 @@ describe('MergeConfirmDialogComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [
-        NgxBootstrapIconsModule.pick(allIcons),
-        ReactiveFormsModule,
-        FormsModule,
-        MergeConfirmDialogComponent,
-      ],
+      imports: [ReactiveFormsModule, FormsModule, MergeConfirmDialogComponent],
      providers: [
        NgbActiveModal,
        provideHttpClient(withInterceptorsFromDi()),
@@ -6,8 +6,8 @@ import {
 import { AsyncPipe } from '@angular/common'
 import { Component, OnInit, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { Document } from 'src/app/data/document'
 import { CorrespondentNamePipe } from 'src/app/pipes/correspondent-name.pipe'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
@@ -26,7 +26,7 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
    DragDropModule,
    FormsModule,
    ReactiveFormsModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
  ],
 })
 export class MergeConfirmDialogComponent
@@ -18,7 +18,7 @@
      (ngModelChange)="onUpdateDocumentChange($event)"
    />
    <label class="btn btn-outline-primary btn-sm" for="removeReplace">
-      <i-bs name="pencil"></i-bs>
+      <pngx-bs-icon name="pencil"></pngx-bs-icon>
      <span class="ms-2" i18n>Replace current document</span>
    </label>
    <input
@@ -31,7 +31,7 @@
      (ngModelChange)="onUpdateDocumentChange($event)"
    />
    <label class="btn btn-outline-primary btn-sm" for="removeCreate">
-      <i-bs name="plus"></i-bs>
+      <pngx-bs-icon name="plus"></pngx-bs-icon>
      <span class="ms-2" i18n>Create new document</span>
    </label>
  </div>
@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { PasswordRemovalConfirmDialogComponent } from './password-removal-confirm-dialog.component'

 describe('PasswordRemovalConfirmDialogComponent', () => {
@@ -11,10 +10,7 @@ describe('PasswordRemovalConfirmDialogComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      providers: [NgbActiveModal],
-      imports: [
-        NgxBootstrapIconsModule.pick(allIcons),
-        PasswordRemovalConfirmDialogComponent,
-      ],
+      imports: [PasswordRemovalConfirmDialogComponent],
    }).compileComponents()

    fixture = TestBed.createComponent(PasswordRemovalConfirmDialogComponent)
@@ -1,13 +1,13 @@
 import { Component } from '@angular/core'
 import { FormsModule } from '@angular/forms'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { ConfirmDialogComponent } from '../confirm-dialog.component'

@Component({
  selector: 'pngx-password-removal-confirm-dialog',
  templateUrl: './password-removal-confirm-dialog.component.html',
  styleUrls: ['./password-removal-confirm-dialog.component.scss'],
-  imports: [FormsModule, NgxBootstrapIconsModule],
+  imports: [FormsModule, BootstrapIconComponent],
 })
 export class PasswordRemovalConfirmDialogComponent extends ConfirmDialogComponent {
  updateDocument: boolean = true
@@ -7,7 +7,7 @@
    <div class="row">
        <div class="col-2 d-flex justify-content-end">
            <button class="btn btn-secondary mt-auto" (click)="rotate(false)" aria-label="Rotate counterclockwise" i18n-aria-label>
-                <i-bs name="arrow-counterclockwise"></i-bs>
+                <pngx-bs-icon name="arrow-counterclockwise"></pngx-bs-icon>
            </button>
        </div>
        <div class="col-8 d-flex align-items-center">
@@ -17,7 +17,7 @@
        </div>
        <div class="col-2 d-flex">
            <button class="btn btn-secondary mt-auto" (click)="rotate()" aria-label="Rotate clockwise" i18n-aria-label>
-                <i-bs name="arrow-clockwise"></i-bs>
+                <pngx-bs-icon name="arrow-clockwise"></pngx-bs-icon>
            </button>
        </div>
    </div>
@@ -2,7 +2,6 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { RotateConfirmDialogComponent } from './rotate-confirm-dialog.component'

 describe('RotateConfirmDialogComponent', () => {
@@ -11,10 +10,7 @@ describe('RotateConfirmDialogComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [
-        NgxBootstrapIconsModule.pick(allIcons),
-        RotateConfirmDialogComponent,
-      ],
+      imports: [RotateConfirmDialogComponent],
      providers: [
        NgbActiveModal,
        provideHttpClient(withInterceptorsFromDi()),
@@ -1,6 +1,6 @@
 import { NgStyle } from '@angular/common'
 import { Component, inject, signal } from '@angular/core'
-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 { ConfirmDialogComponent } from '../confirm-dialog.component'

@@ -8,7 +8,7 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
  selector: 'pngx-rotate-confirm-dialog',
  templateUrl: './rotate-confirm-dialog.component.html',
  styleUrl: './rotate-confirm-dialog.component.scss',
-  imports: [NgStyle, NgxBootstrapIconsModule],
+  imports: [NgStyle, BootstrapIconComponent],
 })
 export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
  documentService = inject(DocumentService)
@@ -20,7 +20,7 @@
                    @for (docId of value; track docId) {
                      @if (getDocumentTitle(docId)) {
                          <a routerLink="/documents/{{docId}}" class="badge bg-body text-primary" title="View" i18n-title>
-                              <i-bs width="0.9em" height="0.9em" name="file-text" class="me-1"></i-bs><span>{{ getDocumentTitle(docId) }}</span>
+                              <pngx-bs-icon width="0.9em" height="0.9em" name="file-text" class="me-1"></pngx-bs-icon><span>{{ getDocumentTitle(docId) }}</span>
                          </a>
                      }
                    }
@@ -1,6 +1,6 @@
 <div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose($event)" [popperOptions]="popperOptions">
    <button type="button" class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle aria-label="Custom Fields" i18n-aria-label>
-      <i-bs name="ui-radios"></i-bs><div class="d-none d-lg-inline ms-1"><ng-container i18n>Custom Fields</ng-container></div>
+      <pngx-bs-icon name="ui-radios"></pngx-bs-icon><div class="d-none d-lg-inline ms-1"><ng-container i18n>Custom Fields</ng-container></div>
    </button>
    <div ngbDropdownMenu aria-labelledby="customFieldsDropdown" class="shadow custom-fields-dropdown">
        <div class="list-group list-group-flush" (keydown)="listKeyDown($event)">
@@ -16,7 +16,7 @@
            }
            @if (!filterText?.length || filteredFields.length === 0) {
                <button type="button" class="list-group-item list-group-item-action bg-light" (click)="createField(filterText)" [disabled]="!canCreateFields" #button>
-                    <i-bs width=".9em" height=".9em" name="asterisk" class="me-1"></i-bs><ng-container i18n>Create new field</ng-container>
+                    <pngx-bs-icon width=".9em" height=".9em" name="asterisk" class="me-1"></pngx-bs-icon><ng-container i18n>Create new field</ng-container>
                </button>
            }
        </div>
@@ -10,7 +10,6 @@ import {
  NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
@@ -49,7 +48,6 @@ describe('CustomFieldsDropdownComponent', () => {
        ReactiveFormsModule,
        NgbModalModule,
        NgbDropdownModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        CustomFieldsDropdownComponent,
        SelectComponent,
      ],
@@ -12,8 +12,8 @@ import {
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { CustomField, DATA_TYPE_LABELS } from 'src/app/data/custom-field'
 import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
 import {
@@ -34,7 +34,7 @@ import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit
  styleUrls: ['./custom-fields-dropdown.component.scss'],
  imports: [
    NgbDropdownModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
    FormsModule,
    ReactiveFormsModule,
  ],
@@ -1,7 +1,7 @@
@if (useDropdown) {
  <div class="btn-group w-100" role="group" ngbDropdown #dropdown="ngbDropdown" (openChange)="onOpenChange($event)" [popperOptions]="popperOptions">
    <button class="btn btn-sm" [ngClass]="!editing && isActive ? 'btn-primary' : 'btn-outline-primary'" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled" [aria-label]="title">
-      <i-bs name="{{icon}}"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
+      <pngx-bs-icon name="{{icon}}"></pngx-bs-icon><div class="d-none d-sm-inline ms-1">{{title}}</div>
      @if (isActive) {
        <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge>
      }
@@ -38,11 +38,11 @@
      <fieldset class="btn-group btn-group-sm flex-shrink-0 date-mode" aria-label="Date mode" i18n-aria-label>
        <input type="radio" class="btn-check" [id]="atom.id + '_fixed'" [name]="atom.id + '_dateMode'" [checked]="!relativeDate" (change)="toggleRelativeDate(atom)" [disabled]="disabled" aria-label="Fixed date" i18n-aria-label>
        <label class="btn btn-outline-secondary text-nowrap" [for]="atom.id + '_fixed'" title="Fixed date" i18n-title>
-          <i-bs name="calendar"></i-bs><span class="d-none d-md-inline ms-2" i18n>Fixed</span>
+          <pngx-bs-icon name="calendar"></pngx-bs-icon><span class="d-none d-md-inline ms-2" i18n>Fixed</span>
        </label>
        <input type="radio" class="btn-check" [id]="atom.id + '_relative'" [name]="atom.id + '_dateMode'" [checked]="!!relativeDate" (change)="toggleRelativeDate(atom)" [disabled]="disabled" aria-label="Relative date" i18n-aria-label>
        <label class="btn btn-outline-secondary text-nowrap" [for]="atom.id + '_relative'" title="Relative date" i18n-title>
-          <i-bs name="clock-history"></i-bs><span class="d-none d-md-inline ms-2" i18n>Relative</span>
+          <pngx-bs-icon name="clock-history"></pngx-bs-icon><span class="d-none d-md-inline ms-2" i18n>Relative</span>
        </label>
      </fieldset>
      <div class="input-group input-group-sm flex-grow-1">
@@ -70,7 +70,7 @@
            #d="ngbDatepicker"
            [footerTemplate]="datePickerFooterTemplate" />
          <button class="btn btn-sm btn-outline-secondary" (click)="d.toggle()" type="button" aria-label="Open date picker" i18n-aria-label>
-            <i-bs name="calendar-event"></i-bs>
+            <pngx-bs-icon name="calendar-event"></pngx-bs-icon>
          </button>
          <ng-template #datePickerFooterTemplate>
            <div class="btn-group-xs border-top p-2 d-flex">
@@ -187,7 +187,7 @@
    }
  </div>
  <button class="btn btn-link btn-sm text-danger pe-0 align-self-center" type="button" (click)="removeElement(atom)" [disabled]="disabled" aria-label="Remove query" i18n-aria-label>
-    <i-bs name="x-circle"></i-bs>
+    <pngx-bs-icon name="x-circle"></pngx-bs-icon>
  </button>
 </ng-template>

@@ -221,14 +221,14 @@
    </div>
    <div class="btn-group-vertical ms-2 ps-2 border-start" role="group" aria-label="Vertical button group">
      <button type="button" class="btn btn-sm btn-outline-secondary text-primary" title="Add query" i18n-title (click)="addAtom(expression)" [disabled]="disabled || expression.value.length === CUSTOM_FIELD_QUERY_MAX_ATOMS">
-        <i-bs name="node-plus"></i-bs>
+        <pngx-bs-icon name="node-plus"></pngx-bs-icon>
      </button>
      <button type="button" class="btn btn-sm btn-outline-secondary text-primary" title="Add expression" i18n-title (click)="addExpression(expression)" [disabled]="disabled || expression.depth === CUSTOM_FIELD_QUERY_MAX_DEPTH">
-        <i-bs name="braces"></i-bs>
+        <pngx-bs-icon name="braces"></pngx-bs-icon>
      </button>
      @if (expression.depth > 0) {
        <button type="button" class="btn btn-sm btn-outline-secondary text-danger" (click)="removeElement(expression)" [disabled]="disabled" aria-label="Remove expression" i18n-aria-label>
-          <i-bs name="x-circle"></i-bs>
+          <pngx-bs-icon name="x-circle"></pngx-bs-icon>
        </button>
      }
    </div>
@@ -5,7 +5,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDateAdapter, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import {
@@ -67,7 +66,6 @@ describe('CustomFieldsQueryDropdownComponent', () => {
    await TestBed.configureTestingModule({
      imports: [
        NgbDropdownModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        NgSelectModule,
        FormsModule,
        ReactiveFormsModule,
@@ -24,8 +24,8 @@ import {
  NgbDropdownModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, Subject, Subscription, takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import {
  CUSTOM_FIELD_QUERY_MAX_ATOMS,
@@ -235,7 +235,7 @@ export class CustomFieldQueriesModel {
    NgClass,
    NgTemplateOutlet,
    NgSelectModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
    NgbDropdownModule,
  ],
 })
@@ -1,6 +1,6 @@
 <div class="btn-group w-100" ngbDropdown role="group" [popperOptions]="popperOptions" [placement]="placement">
  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="createdDateTo || createdDateFrom ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled" [aria-label]="title">
-    <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
+    <pngx-bs-icon width="1em" height="1em" name="calendar-event-fill"></pngx-bs-icon><div class="d-none d-sm-inline ms-1">{{title}}</div>
    <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
  </button>
  <div [id]="dropdownMenuId" class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
@@ -10,8 +10,8 @@
        <div class="selected-icon">
          @if (createdRelativeDate) {
            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedRelativeDate()" aria-label="Clear created relative date" i18n-aria-label>
-              <i-bs width="1em" height="1em" name="check" class="variant-unfocused text-dark"></i-bs>
-              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+              <pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused text-dark"></pngx-bs-icon>
+              <pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
            </a>
          }
        </div>
@@ -35,8 +35,8 @@
        <div class="selected-icon">
          @if (createdDateFrom) {
            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedFrom()" aria-label="Clear created from date" i18n-aria-label>
-              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
-              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+              <pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused"></pngx-bs-icon>
+              <pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
            </a>
          }
        </div>
@@ -45,7 +45,7 @@
          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
            maxlength="10" [(ngModel)]="createdDateFrom" ngbDatepicker #createdDateFromPicker="ngbDatepicker" [footerTemplate]="createdFromFooterTemplate">
          <button class="btn btn-outline-secondary" (click)="createdDateFromPicker.toggle()" type="button" aria-label="Open created from date picker" i18n-aria-label>
-            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+            <pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
          </button>
          <ng-template #createdFromFooterTemplate>
            <div class="btn-group-xs border-top p-2 d-flex">
@@ -59,8 +59,8 @@
        <div class="selected-icon">
          @if (createdDateTo) {
            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedTo()" aria-label="Clear created to date" i18n-aria-label>
-              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
-              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+              <pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused"></pngx-bs-icon>
+              <pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
            </a>
          }
        </div>
@@ -69,7 +69,7 @@
          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
            maxlength="10" [(ngModel)]="createdDateTo" ngbDatepicker #createdDateToPicker="ngbDatepicker" [footerTemplate]="createdToFooterTemplate">
          <button class="btn btn-outline-secondary" (click)="createdDateToPicker.toggle()" type="button" aria-label="Open created to date picker" i18n-aria-label>
-            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+            <pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
          </button>
          <ng-template #createdToFooterTemplate>
            <div class="btn-group-xs border-top p-2 d-flex">
@@ -87,8 +87,8 @@
        <div class="selected-icon">
          @if (addedRelativeDate) {
            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedRelativeDate()" aria-label="Clear added relative date" i18n-aria-label>
-              <i-bs width="1em" height="1em" name="check" class="variant-unfocused text-dark"></i-bs>
-              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+              <pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused text-dark"></pngx-bs-icon>
+              <pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
            </a>
          }
        </div>
@@ -112,8 +112,8 @@
        <div class="selected-icon">
          @if (addedDateFrom) {
            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedFrom()" aria-label="Clear added from date" i18n-aria-label>
-              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
-              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+              <pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused"></pngx-bs-icon>
+              <pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
            </a>
          }
        </div>
@@ -122,7 +122,7 @@
          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
            maxlength="10" [(ngModel)]="addedDateFrom" ngbDatepicker #addedDateFromPicker="ngbDatepicker" [footerTemplate]="addedFromFooterTemplate">
          <button class="btn btn-outline-secondary" (click)="addedDateFromPicker.toggle()" type="button" aria-label="Open added from date picker" i18n-aria-label>
-            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+            <pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
          </button>
          <ng-template #addedFromFooterTemplate>
            <div class="btn-group-xs border-top p-2 d-flex">
@@ -136,8 +136,8 @@
        <div class="selected-icon">
          @if (addedDateTo) {
            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedTo()" aria-label="Clear added to date" i18n-aria-label>
-              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
-              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+              <pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused"></pngx-bs-icon>
+              <pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
            </a>
          }
        </div>
@@ -146,7 +146,7 @@
          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
            maxlength="10" [(ngModel)]="addedDateTo" ngbDatepicker #addedDateToPicker="ngbDatepicker" [footerTemplate]="addedToFooterTemplate">
          <button class="btn btn-outline-secondary" (click)="addedDateToPicker.toggle()" type="button" aria-label="Open added to date picker" i18n-aria-label>
-            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+            <pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
          </button>
          <ng-template #addedToFooterTemplate>
            <div class="btn-group-xs border-top p-2 d-flex">
@@ -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 { NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
@@ -26,7 +25,6 @@ describe('DatesDropdownComponent', () => {
        NgbModule,
        FormsModule,
        ReactiveFormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        DatesDropdownComponent,
        ClearableBadgeComponent,
        CustomDatePipe,
@@ -1,3 +1,4 @@
+import { _IdGenerator } from '@angular/cdk/a11y'
 import { NgClass, NgTemplateOutlet } from '@angular/common'
 import {
  Component,
@@ -15,15 +16,14 @@ import {
  NgbDropdownModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, Subscription } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 import { pngxPopperOptions } from 'src/app/utils/popper-options'
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
-import { _IdGenerator } from '@angular/cdk/a11y'

 export interface DateSelection {
  createdTo?: string
@@ -57,7 +57,7 @@ export enum RelativeDate {
  imports: [
    ClearableBadgeComponent,
    CustomDatePipe,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
    NgbDatepickerModule,
    NgbDropdownModule,
    NgSelectModule,
@@ -17,7 +17,7 @@
      @switch (objectForm.get('data_type').value) {
        @case (CustomFieldDataType.Select) {
          <button type="button" class="btn btn-sm btn-primary my-2" (click)="addSelectOption()">
-            <span i18n>Add option</span><i-bs class="ms-1" name="plus-circle"></i-bs>
+            <span i18n>Add option</span><pngx-bs-icon class="ms-1" name="plus-circle"></pngx-bs-icon>
          </button>
          <div formArrayName="select_options">
            @for (option of objectForm.controls.extra_data.controls.select_options.controls; track option; let i = $index) {
@@ -6,7 +6,6 @@ import { ElementRef, QueryList } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { CustomFieldDataType } from 'src/app/data/custom-field'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -28,7 +27,6 @@ describe('CustomFieldEditDialogComponent', () => {
        ReactiveFormsModule,
        NgSelectModule,
        NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        CustomFieldEditDialogComponent,
        IfPermissionsDirective,
        IfOwnerDirective,
@@ -15,8 +15,8 @@ import {
  ReactiveFormsModule,
 } from '@angular/forms'
 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 {
  CustomField,
  CustomFieldDataType,
@@ -41,7 +41,7 @@ const SELECT_OPTION_PAGE_SIZE = 8
    FormsModule,
    ReactiveFormsModule,
    NgbPaginationModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
  ],
 })
 export class CustomFieldEditDialogComponent
@@ -4,7 +4,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -27,7 +26,6 @@ describe('GroupEditDialogComponent', () => {
        ReactiveFormsModule,
        NgSelectModule,
        NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        GroupEditDialogComponent,
        IfPermissionsDirective,
        IfOwnerDirective,
@@ -4,7 +4,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -28,7 +27,6 @@ describe('TagEditDialogComponent', () => {
        ReactiveFormsModule,
        NgSelectModule,
        NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        TagEditDialogComponent,
        IfPermissionsDirective,
        IfOwnerDirective,
@@ -8,7 +8,6 @@ import {
 } from '@angular/forms'
 import { NgbActiveModal, 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 { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -39,7 +38,6 @@ describe('UserEditDialogComponent', () => {
        ReactiveFormsModule,
        NgSelectModule,
        NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
        UserEditDialogComponent,
        IfPermissionsDirective,
        IfOwnerDirective,
@@ -30,7 +30,7 @@
              <div class="d-flex">
                <p class="p-2" i18n>Trigger Workflow On:</p>
                <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addTrigger()">
-                  <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Trigger</ng-container>
+                  <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Trigger</ng-container>
                </button>
              </div>
              <div ngbAccordion [closeOthers]="true">
@@ -72,7 +72,7 @@
              <div class="d-flex">
                <p class="p-2" i18n>Apply Actions:</p>
                <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addAction()">
-                  <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Action</ng-container>
+                  <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Action</ng-container>
                </button>
              </div>
              <div ngbAccordion [closeOthers]="true" cdkDropList (cdkDropListDropped)="onActionDrop($event)">
@@ -80,7 +80,7 @@
                  <div ngbAccordionItem [formGroup]="actionFields.controls[i]">
                    <div ngbAccordionHeader cdkDrag>
                      <button ngbAccordionButton>
-                        <i-bs name="grip-vertical" class="ms-n3 pe-1"></i-bs>
+                        <pngx-bs-icon name="grip-vertical" class="ms-n3 pe-1"></pngx-bs-icon>
                        {{i + 1}}. {{getActionTypeOptionName(actionFields.controls[i].value.type)}}
                        @if(action.id) {
                          <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{action.id}}</span>
@@ -187,7 +187,7 @@
                (click)="addFilter(formGroup)"
                [disabled]="!canAddFilter(formGroup)"
              >
-                <i-bs name="plus-circle" class="me-1"></i-bs><span i18n>Add filter</span>
+                <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><span i18n>Add filter</span>
              </button>
            </div>
            <ul class="mt-2 list-group filters" formArrayName="filters">
@@ -240,7 +240,7 @@
                      class="btn btn-link text-danger p-0"
                      (click)="removeFilter(formGroup, filterIndex)"
                    >
-                      <i-bs name="trash"></i-bs><span class="ms-1" i18n>Delete</span>
+                      <pngx-bs-icon name="trash"></pngx-bs-icon><span class="ms-1" i18n>Delete</span>
                    </button>
                  </div>
                </li>
@@ -15,8 +15,8 @@ import {
  ReactiveFormsModule,
 } from '@angular/forms'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subscription, catchError, map, of, takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { Correspondent } from 'src/app/data/correspondent'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { DocumentType } from 'src/app/data/document-type'
@@ -496,7 +496,7 @@ const FILTER_HANDLERS: Record<TriggerFilterType, FilterHandler> = {
    NgbAccordionModule,
    NgTemplateOutlet,
    DragDropModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
  ],
 })
 export class WorkflowEditDialogComponent
@@ -3,7 +3,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsService } from 'src/app/services/permissions.service'
@@ -20,11 +19,7 @@ describe('EmailDocumentDialogComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [
-        EmailDocumentDialogComponent,
-        IfPermissionsDirective,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
+      imports: [EmailDocumentDialogComponent, IfPermissionsDirective],
      providers: [
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
@@ -1,7 +1,6 @@
 import { Component, effect, inject, signal } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
@@ -10,7 +9,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
  selector: 'pngx-email-document-dialog',
  templateUrl: './email-document-dialog.component.html',
  styleUrl: './email-document-dialog.component.scss',
-  imports: [FormsModule, NgxBootstrapIconsModule],
+  imports: [FormsModule],
 })
 export class EmailDocumentDialogComponent extends LoadingComponentWithPermissions {
  private activeModal = inject(NgbActiveModal)
@@ -1,6 +1,6 @@
 <div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)" [popperOptions]="popperOptions" [autoClose]="!creating()">
  <button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled" [aria-label]="title">
-    <i-bs name="{{icon}}"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
+    <pngx-bs-icon name="{{icon}}"></pngx-bs-icon><div class="d-none d-sm-inline ms-1">{{title}}</div>
    @if (!editing && selectionModel.totalCount > 0) {
      <pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
    }
@@ -52,20 +52,20 @@
        @if (filteredItems.length === 0 && createRef !== undefined && filterText?.length > 0) {
          <button class="list-group-item list-group-item-action bg-light" (click)="createClicked()" [disabled]="disabled">
            <span class="ms-2"><ng-container i18n>Create</ng-container> "{{filterText}}"</span>
-            <i-bs width="1.5em" height="1em" name="plus"></i-bs>
+            <pngx-bs-icon width="1.5em" height="1em" name="plus"></pngx-bs-icon>
          </button>
        }
        @if (filteredItems.length > 0) {
          <button class="list-group-item list-group-item-action bg-light d-flex align-items-center" (click)="applyClicked()" [disabled]="!modelIsDirty() || disabled">
            <span class="ms-2" [ngClass]="{'fw-bold': modelIsDirty()}" i18n>Apply</span>
-            <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
+            <pngx-bs-icon width="1.5em" height="1em" name="arrow-right"></pngx-bs-icon>
          </button>
        }
      }
      @if (extraButtonTitle && (showExtraButtonIfEmpty || filteredItems?.length > 0)) {
        <button class="list-group-item list-group-item-action bg-light d-flex align-items-center" (click)="extraButtonClicked($event)" [disabled]="disabled">
          <span class="ms-2 fw-bold">{{extraButtonTitle}}</span>
-          <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
+          <pngx-bs-icon width="1.5em" height="1em" name="arrow-right"></pngx-bs-icon>
        </button>
      }
      @if (!editing && manyToOne) {
@@ -2,7 +2,6 @@ import { ScrollingModule } from '@angular/cdk/scrolling'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { NEVER, Subject } from 'rxjs'
 import { NEGATIVE_NULL_FILTER_VALUE } from 'src/app/data/filter-rule-type'
 import {
@@ -63,7 +62,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ],
-      imports: [NgxBootstrapIconsModule.pick(allIcons), ScrollingModule],
+      imports: [ScrollingModule],
    }).compileComponents()

    hotkeyService = TestBed.inject(HotKeyService)
@@ -20,8 +20,8 @@ import {
  NgbDropdownModule,
  NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, filter, first, merge, takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { NEGATIVE_NULL_FILTER_VALUE } from 'src/app/data/filter-rule-type'
 import { MatchingModel } from 'src/app/data/matching-model'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
@@ -706,7 +706,7 @@ export class FilterableDropdownSelectionModel {
    ToggleableDropdownButtonComponent,
    FormsModule,
    ReactiveFormsModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
    NgbDropdownModule,
    NgClass,
    ScrollingModule,
@@ -6,13 +6,13 @@
  [disabled]="disabled">
  <div class="selected-icon me-1">
    @if (isChecked()) {
-      <i-bs width="1em" height="1em" name="check"></i-bs>
+      <pngx-bs-icon width="1em" height="1em" name="check"></pngx-bs-icon>
    }
    @if (isPartiallyChecked()) {
-      <i-bs width="1em" height="1em" name="dash"></i-bs>
+      <pngx-bs-icon width="1em" height="1em" name="dash"></pngx-bs-icon>
    }
    @if (isExcluded()) {
-      <i-bs width="1em" height="1em" name="x"></i-bs>
+      <pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon>
    }
  </div>
  <div class="me-1 name-cell" [style.--depth]="isTag ? getDepth() + 1 : 1">
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { MatchingModel } from 'src/app/data/matching-model'
 import { Tag } from 'src/app/data/tag'
 import { TagComponent } from '../../tag/tag.component'
@@ -15,7 +15,7 @@ export enum ToggleableItemState {
  selector: 'pngx-toggleable-dropdown-button',
  templateUrl: './toggleable-dropdown-button.component.html',
  styleUrls: ['./toggleable-dropdown-button.component.scss'],
-  imports: [TagComponent, NgxBootstrapIconsModule],
+  imports: [TagComponent, BootstrapIconComponent],
 })
 export class ToggleableDropdownButtonComponent {
  @Input()
@@ -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>
@@ -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() {
@@ -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>
@@ -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()
@@ -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,
@@ -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>
  }
@@ -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,
  ],
 })
@@ -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>
Author	SHA1	Message	Date
stumpylog	f1a858e032	Performance: use small vec0 chunks and larger pages for the LLM index The vec0 default of 1024 rows per vector chunk makes each chunk a multi-megabyte blob. On spinning disks, indexing a document took about 2.5 seconds and re-indexing one about 13 seconds. With 32 rows per chunk the same operations take about 35 and 180 milliseconds, with the write-ahead log a third of the size and no cost in query speed or file size. Pair that with 64 KiB SQLite pages, which made cold scans about 35% faster and warm ones about 45% faster at no write cost once the chunks are small. The page size is set before the file enters WAL mode, so it applies to new files. Neither setting changes the schema or any query, so there is no migration. An existing index picks up both the next time it is rebuilt through compact or rebuild.	2026-11-03 09:48:51 -08:00
Trenton H	cc15aa0180	Fix: make index and llmindex init wait for tesseract language install (#14670 ) * Fix: make index and llmindex init wait for tesseract language install * Updates this out of date diagram and makes it Mermaid	2026-11-03 06:59:44 -08:00
GitHub Actions	e6ea046e31	Auto translate strings	2026-11-03 06:12:15 +00:00
shamoon	04bae0af62	Fix: prevent loss of save view name on save + close (#14667 )	2026-11-02 22:11:09 -08:00
GitHub Actions	d2f4cfa783	Auto translate strings	2026-11-03 05:26:53 +00:00
shamoon	7cdf8ec3c2	Chore: ditch the abandoned ngx-bootstrap-icons, roll our own (#14665 )	2026-11-02 21:25:35 -08:00
GitHub Actions	786eac0b22	Auto translate strings	2026-11-03 03:23:17 +00:00
shamoon	16b79fc023	Fixhancement: doc detail mobile ux tweaks (#14664 )	2026-11-02 19:21:56 -08:00
Trenton H	cd58cffd89	chore(deps): bump turbohtml to 1.15.3 (#14662 ) turbohtml 1.10.0 -> 1.15.3. Includes sanitizer hardening (GHSA-9x48-74fj-x342, GHSA-wh2c-9vrv-w597, GHSA-pjrh-5m66-3wwf, URL schemes hidden behind character references in the bleach shim). Only the bleach clean shim and linkify are used, in the mail parser.	2026-11-02 16:15:36 -08:00
dependabot[bot]	2c82b06b93	docker-compose(deps): bump gotenberg/gotenberg in /docker/compose (#14634 ) Bumps gotenberg/gotenberg from 8.37 to 8.38. --- updated-dependencies: - dependency-name: gotenberg/gotenberg dependency-version: '8.38' dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-11-02 23:11:43 +00:00
Trenton H	5486fa7c40	chore(deps): bump Django, django-guardian, django-filter, drf-spectacular-sidecar (#14661 ) - django 5.2.17 -> 5.2.18 (security release: DoS fixes in language variant lookup and header parameter parsing, plus other security fixes) - django-guardian 3.5.0 -> 3.5.2 (GHSA-5729-mvhf-9gq4: get_objects_for_user could return objects missing required permissions; also fixes global permission handling in get_objects_for_group and get_40x_or_None) - django-filter 26.1 -> 26.2 (LinkWidget label escaping hardening) - drf-spectacular-sidecar 2026.9.1 -> 2026.10.1	2026-11-02 21:47:27 +00:00
Trenton H	fefe4e5802	Fix: Bumps filelock to 4.2.6 to pick up ACL related fixes (#14656 )	2026-11-02 08:53:17 -08:00
shamoon	936f9363a0	Fix: ensure import bulk_edit tasks in Celery workers (#14653 )	2026-11-02 07:59:27 -08:00