Chore(deps): Bump the pre-commit-dependencies group with 4 updates

Bumps the pre-commit-dependencies group with 4 updates: [https://github.com/rbubley/mirrors-prettier](https://github.com/rbubley/mirrors-prettier), prettier, [https://github.com/astral-sh/ruff-pre-commit](https://github.com/astral-sh/ruff-pre-commit) and [https://github.com/tox-dev/pyproject-fmt](https://github.com/tox-dev/pyproject-fmt). Updates `https://github.com/rbubley/mirrors-prettier` from v3.9.9 to 3.9.10 - [Commits](https://github.com/rbubley/mirrors-prettier/compare/v3.9.9...v3.9.10) Updates `prettier` from 3.9.9 to 3.9.10 Updates `https://github.com/astral-sh/ruff-pre-commit` from v0.16.9 to 0.17.2 - [Release notes](https://github.com/astral-sh/ruff-pre-commit/releases) - [Commits](https://github.com/astral-sh/ruff-pre-commit/compare/v0.16.9...v0.17.2) Updates `https://github.com/tox-dev/pyproject-fmt` from v2.29.4 to 2.30.3 - [Release notes](https://github.com/tox-dev/pyproject-fmt/releases) - [Commits](https://github.com/tox-dev/pyproject-fmt/compare/v2.29.4...v2.30.3) --- updated-dependencies: - dependency-name: https://github.com/rbubley/mirrors-prettier dependency-version: 3.9.10 dependency-type: direct:production dependency-group: pre-commit-dependencies - dependency-name: prettier dependency-version: 3.9.10 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: pre-commit-dependencies - dependency-name: https://github.com/astral-sh/ruff-pre-commit dependency-version: 0.17.2 dependency-type: direct:production dependency-group: pre-commit-dependencies - dependency-name: https://github.com/tox-dev/pyproject-fmt dependency-version: 2.30.3 dependency-type: direct:production dependency-group: pre-commit-dependencies ... Signed-off-by: dependabot[bot] <support@github.com>
2026-11-03 21:39:22 +00:00 · 2026-11-01 20:22:12 +00:00
284 changed files with 2314 additions and 3229 deletions
@@ -8,8 +8,7 @@ on:
      - 'translations**'
  workflow_dispatch:
 concurrency:
-  # Let dev/main commits finish, PR and feature-branch runs supersede older ones
-  group: backend-${{ github.event.pull_request.number || ((github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main') && github.run_id) || github.ref }}
+  group: backend-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true
 env:
  DEFAULT_UV_VERSION: "0.13.x"
@@ -13,8 +13,7 @@ on:
      - main
  workflow_dispatch:
 concurrency:
-  # Let dev/main commits finish, PR and feature-branch runs supersede older ones
-  group: docker-${{ github.event.pull_request.number || ((github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main') && github.run_id) || github.ref }}
+  group: docker-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true
 env:
  REGISTRY: ghcr.io
@@ -6,8 +6,7 @@ on:
  pull_request:
  workflow_dispatch:
 concurrency:
-  # Let dev/main commits finish, PR and feature-branch runs supersede older ones
-  group: docs-${{ github.event.pull_request.number || ((github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main') && github.run_id) || github.ref }}
+  group: docs-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true
 permissions:
  contents: read
@@ -8,8 +8,7 @@ on:
      - 'translations**'
  workflow_dispatch:
 concurrency:
-  # Let dev/main commits finish, PR and feature-branch runs supersede older ones
-  group: frontend-${{ github.event.pull_request.number || ((github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main') && github.run_id) || github.ref }}
+  group: frontend-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true
 permissions: {}
 jobs:
@@ -192,7 +191,7 @@ jobs:
    runs-on: ubuntu-26.04
    permissions:
      contents: read
-    container: mcr.microsoft.com/playwright:v1.64.1-resolute
+    container: mcr.microsoft.com/playwright:v1.62.1-resolute
    env:
      PLAYWRIGHT_BROWSERS_PATH: /ms-playwright
      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
@@ -7,8 +7,7 @@ on:
    branches-ignore:
      - 'translations**'
 concurrency:
-  # Let dev/main commits finish, PR and feature-branch runs supersede older ones
-  group: lint-${{ github.event.pull_request.number || ((github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main') && github.run_id) || github.ref }}
+  group: lint-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true
 permissions:
  contents: read
@@ -8,8 +8,7 @@ on:
      - 'translations**'
  workflow_dispatch:
 concurrency:
-  # Let dev/main commits finish, PR and feature-branch runs supersede older ones
-  group: static-analysis-${{ github.event.pull_request.number || ((github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main') && github.run_id) || github.ref }}
+  group: static-analysis-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true
 permissions:
  contents: read
@@ -38,7 +38,7 @@ repos:
          - json
  # See https://github.com/prettier/prettier/issues/15742 for the fork reason
  - repo: https://github.com/rbubley/mirrors-prettier
-    rev: 'v3.9.9'
+    rev: 'v3.9.10'
    hooks:
      - id: prettier
        types_or:
@@ -46,16 +46,16 @@ repos:
          - ts
          - markdown
        additional_dependencies:
-          - prettier@3.9.9
+          - prettier@3.9.10
          - 'prettier-plugin-organize-imports@4.3.0'
  # Python hooks
  - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.16.9
+    rev: v0.17.2
    hooks:
      - id: ruff-check
      - id: ruff-format
  - repo: https://github.com/tox-dev/pyproject-fmt
-    rev: "v2.29.4"
+    rev: "v2.30.3"
    hooks:
      - id: pyproject-fmt
        additional_dependencies: [tomli]
@@ -4,7 +4,7 @@
 # correct networking for the tests
 services:
  gotenberg:
-    image: docker.io/gotenberg/gotenberg:8.38
+    image: docker.io/gotenberg/gotenberg:8.37
    hostname: gotenberg
    container_name: gotenberg
    network_mode: host
@@ -24,7 +24,7 @@ services:
    network_mode: host
    restart: unless-stopped
  greenmail:
-    image: docker.io/greenmail/standalone:2.1.15
+    image: docker.io/greenmail/standalone:2.1.14
    hostname: greenmail
    container_name: greenmail
    environment:
@@ -35,7 +35,7 @@ services:
      - "3143:3143" # IMAP
    restart: unless-stopped
  nginx:
-    image: docker.io/nginx:1.31.7-alpine
+    image: docker.io/nginx:1.31.6-alpine
    hostname: nginx
    container_name: nginx
    ports:
@@ -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.38
+    image: docker.io/gotenberg/gotenberg:8.37
    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.38
+    image: docker.io/gotenberg/gotenberg:8.37
    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.38
+    image: docker.io/gotenberg/gotenberg:8.37
    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.
@@ -1,57 +0,0 @@
-# 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.18",
+  "django~=5.2.13",
  "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>=26.2,<27",
-  "django-guardian>=3.5.2,<3.6",
+  "django-filter>=25.1,<27",
+  "django-guardian>=3.3.3,<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.10.1,<2026.11",
+  "drf-spectacular-sidecar>=2026.7.1,<2026.10",
  "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.15.3",
+  "turbohtml~=1.10.0",
  "watchfiles>=1.2",
  "whitenoise~=6.11",
  "whoosh-compat[tantivy]==0.3",
@@ -69,9 +69,6 @@
              "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 > pngx-bs-icon').first().click()
+  await page.locator('.w-100 > label > i-bs').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$|bootstrap-icons/icons/.*\\.svg$))',
+    'node_modules/(?!.*(\\.mjs$|tslib|lodash-es|normalize-diacritics|marked|@angular/common/locales/.*\\.js$))',
  ],
  moduleNameMapper: {
    ...esmPreset.moduleNameMapper,
@@ -5,14 +5,14 @@
      <trans-unit id="ngb.alert.close" datatype="html">
        <source>Close</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/alert/alert.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/alert/alert.ts</context>
          <context context-type="linenumber">38,39</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.carousel.slide-number" datatype="html">
-        <source> Slide <x id="INTERPOLATION" equiv-text="source?: NgbSli"/> of <x id="INTERPOLATION_1" equiv-text="s._cycleToSelec"/> </source>
+        <source> Slide <x id="INTERPOLATION" equiv-text="xt(source?: Ngb"/> of <x id="INTERPOLATION_1" equiv-text="this._cycleToSe"/> </source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/carousel/carousel.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/carousel/carousel.ts</context>
          <context context-type="linenumber">386,393</context>
        </context-group>
        <note priority="1" from="description">Currently selected slide number read by screen reader</note>
@@ -20,219 +20,219 @@
      <trans-unit id="ngb.carousel.previous" datatype="html">
        <source>Previous</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/carousel/carousel.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/carousel/carousel.ts</context>
          <context context-type="linenumber">425,426</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.carousel.next" datatype="html">
        <source>Next</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/carousel/carousel.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/carousel/carousel.ts</context>
          <context context-type="linenumber">452,453</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.datepicker.select-month" datatype="html">
        <source>Select month</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
          <context context-type="linenumber">52</context>
        </context-group>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
          <context context-type="linenumber">52</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.datepicker.select-year" datatype="html">
        <source>Select year</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
          <context context-type="linenumber">52</context>
        </context-group>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
          <context context-type="linenumber">52</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.datepicker.previous-month" datatype="html">
        <source>Previous month</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/datepicker/datepicker-navigation.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/datepicker/datepicker-navigation.ts</context>
          <context context-type="linenumber">73,76</context>
        </context-group>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/datepicker/datepicker-navigation.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/datepicker/datepicker-navigation.ts</context>
          <context context-type="linenumber">73,76</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.datepicker.next-month" datatype="html">
        <source>Next month</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/datepicker/datepicker-navigation.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/datepicker/datepicker-navigation.ts</context>
          <context context-type="linenumber">73,74</context>
        </context-group>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/datepicker/datepicker-navigation.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/datepicker/datepicker-navigation.ts</context>
          <context context-type="linenumber">73,74</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.first" datatype="html">
        <source>««</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">277,278</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.previous" datatype="html">
        <source>«</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">277,278</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.next" datatype="html">
        <source>»</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">277</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.last" datatype="html">
        <source>»»</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">277</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.first-aria" datatype="html">
        <source>First</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">277,278</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.previous-aria" datatype="html">
        <source>Previous</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">277,278</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.next-aria" datatype="html">
        <source>Next</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">277,278</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.last-aria" datatype="html">
        <source>Last</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">277,278</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.progressbar.value" datatype="html">
        <source><x id="INTERPOLATION"/></source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/progressbar/progressbar.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/progressbar/progressbar.ts</context>
          <context context-type="linenumber">39,40</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.HH" datatype="html">
        <source>HH</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.hours" datatype="html">
        <source>Hours</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.MM" datatype="html">
        <source>MM</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.minutes" datatype="html">
        <source>Minutes</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.increment-hours" datatype="html">
        <source>Increment hours</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.decrement-hours" datatype="html">
        <source>Decrement hours</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.increment-minutes" datatype="html">
        <source>Increment minutes</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.decrement-minutes" datatype="html">
        <source>Decrement minutes</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.SS" datatype="html">
        <source>SS</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.seconds" datatype="html">
        <source>Seconds</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.increment-seconds" datatype="html">
        <source>Increment seconds</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.decrement-seconds" datatype="html">
        <source>Decrement seconds</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.PM" datatype="html">
        <source><x id="INTERPOLATION"/></source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.toast.close-aria" datatype="html">
        <source>Close</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.3_@angular+core@22.2.3_@angular+_2a970977f09c8afdd1f9933e219c8db5/node_modules/src/toast/toast.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.2.2_@angular+core@22.2.2_@angular+_56804c6e9d763769999573a32671b982/node_modules/src/toast/toast.ts</context>
          <context context-type="linenumber">80</context>
        </context-group>
      </trans-unit>
@@ -687,11 +687,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">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 context-type="linenumber">441,442</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>
@@ -863,7 +859,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">473</context>
+          <context context-type="linenumber">460</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
@@ -1478,10 +1474,6 @@
          <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>
@@ -6796,21 +6788,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">52</context>
+          <context context-type="linenumber">53</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">58</context>
+          <context context-type="linenumber">59</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">59</context>
+          <context context-type="linenumber">60</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6381578200008167206" datatype="html">
@@ -8596,7 +8588,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">496</context>
+          <context context-type="linenumber">483</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
@@ -8709,7 +8701,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/main.ts</context>
-          <context context-type="linenumber">168</context>
+          <context context-type="linenumber">483</context>
        </context-group>
      </trans-unit>
      <trans-unit id="5028777105388019087" datatype="html">
@@ -8871,82 +8863,63 @@
        <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">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 context-type="linenumber">443</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">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 context-type="linenumber">445</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">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 context-type="linenumber">447,448</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">468</context>
+          <context context-type="linenumber">455</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">497,498</context>
+          <context context-type="linenumber">484,485</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">501</context>
+          <context context-type="linenumber">488</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">504</context>
+          <context context-type="linenumber">491</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">511</context>
+          <context context-type="linenumber">498</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">545</context>
+          <context context-type="linenumber">532</context>
        </context-group>
      </trans-unit>
      <trans-unit id="5758784066858623886" datatype="html">
@@ -10404,31 +10377,31 @@
        </context-group>
      </trans-unit>
      <trans-unit id="2155249406916744630" datatype="html">
-        <source>View &quot;<x id="PH" equiv-text="view.name ?? title"/>&quot; saved successfully.</source>
+        <source>View &quot;<x id="PH" equiv-text="this.list.activeSavedViewTitle"/>&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">423</context>
+          <context context-type="linenumber">422</context>
        </context-group>
      </trans-unit>
      <trans-unit id="4646273665293421938" datatype="html">
-        <source>Failed to save view &quot;<x id="PH" equiv-text="title"/>&quot;.</source>
+        <source>Failed to save view &quot;<x id="PH" equiv-text="this.list.activeSavedViewTitle"/>&quot;.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/document-list.component.ts</context>
-          <context context-type="linenumber">429</context>
+          <context context-type="linenumber">428</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">498</context>
+          <context context-type="linenumber">497</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">504</context>
+          <context context-type="linenumber">503</context>
        </context-group>
      </trans-unit>
      <trans-unit id="739880801667335279" datatype="html">
@@ -11478,6 +11451,13 @@
          <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">
@@ -13478,14 +13458,14 @@
        <source>Prev</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/main.ts</context>
-          <context context-type="linenumber">167</context>
+          <context context-type="linenumber">482</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">169</context>
+          <context context-type="linenumber">484</context>
        </context-group>
      </trans-unit>
    </body>
@@ -15,60 +15,60 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/cdk": "^22.2.4",
-    "@angular/common": "~22.2.3",
-    "@angular/compiler": "~22.2.3",
-    "@angular/core": "~22.2.3",
-    "@angular/forms": "~22.2.3",
-    "@angular/localize": "~22.2.3",
-    "@angular/platform-browser": "~22.2.3",
-    "@angular/router": "~22.2.3",
+    "@angular/cdk": "^22.2.2",
+    "@angular/common": "~22.2.2",
+    "@angular/compiler": "~22.2.2",
+    "@angular/core": "~22.2.2",
+    "@angular/forms": "~22.2.2",
+    "@angular/localize": "~22.2.2",
+    "@angular/platform-browser": "~22.2.2",
+    "@angular/router": "~22.2.2",
    "@ng-bootstrap/ng-bootstrap": "^21.0.0",
    "@ng-select/ng-select": "~24.2.1",
    "@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",
+    "marked": "~18.0.14",
    "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",
    "ngx-ui-tour-ng-bootstrap": "^19.0.0",
    "normalize-diacritics": "^5.0.0",
-    "pdfjs-dist": "^6.4.299",
+    "pdfjs-dist": "^6.3.289",
    "rxjs": "^7.8.2",
    "tslib": "^2.8.1",
    "utif": "^3.1.0",
-    "uuid": "^14.0.3"
+    "uuid": "^14.0.2"
  },
  "devDependencies": {
    "@angular-builders/jest": "^22.0.1",
-    "@angular-devkit/core": "^22.2.4",
-    "@angular-devkit/schematics": "^22.2.4",
+    "@angular-devkit/core": "^22.2.2",
+    "@angular-devkit/schematics": "^22.2.2",
    "@angular-eslint/builder": "22.6.0",
    "@angular-eslint/eslint-plugin": "22.6.0",
    "@angular-eslint/eslint-plugin-template": "22.6.0",
    "@angular-eslint/schematics": "22.6.0",
    "@angular-eslint/template-parser": "22.6.0",
-    "@angular/build": "22.2.4",
-    "@angular/cli": "22.2.4",
-    "@angular/compiler-cli": "~22.2.3",
-    "@playwright/test": "^1.64.1",
+    "@angular/build": "22.2.2",
+    "@angular/cli": "22.2.2",
+    "@angular/compiler-cli": "~22.2.2",
+    "@playwright/test": "^1.62.1",
    "@types/jest": "^30.0.0",
-    "@types/node": "^26.6.5",
-    "@typescript-eslint/eslint-plugin": "^8.72.0",
-    "@typescript-eslint/parser": "^8.72.0",
-    "@typescript-eslint/utils": "^8.72.0",
-    "eslint": "^10.13.0",
+    "@types/node": "^26.6.2",
+    "@typescript-eslint/eslint-plugin": "^8.70.1",
+    "@typescript-eslint/parser": "^8.70.1",
+    "@typescript-eslint/utils": "^8.70.1",
+    "eslint": "^10.11.0",
    "jest": "30.5.2",
    "jest-environment-jsdom": "^30.5.2",
    "jest-junit": "^17.0.0",
    "jest-preset-angular": "^17.0.3",
    "jest-websocket-mock": "^2.5.0",
-    "prettier": "^3.9.10",
+    "prettier": "^3.9.9",
    "prettier-plugin-organize-imports": "^4.3.0",
    "ts-node": "~10.9.2",
    "typescript": "^6.0.3"
@@ -3,6 +3,7 @@ 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,
@@ -46,6 +47,7 @@ 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">
-                                                        <pngx-bs-icon name="info-circle"></pngx-bs-icon>
+                                                        <i-bs name="info-circle"></i-bs>
                                                    </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)">
-                                                            <pngx-bs-icon class="me-1" name="x"></pngx-bs-icon><ng-container i18n>Reset to external</ng-container>
+                                                            <i-bs class="me-1" name="x"></i-bs><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)">
-                                                            <pngx-bs-icon class="me-1" name="x"></pngx-bs-icon><ng-container i18n>Reset</ng-container>
+                                                            <i-bs class="me-1" name="x"></i-bs><ng-container i18n>Reset</ng-container>
                                                        </button>
                                                      }
                                                    }
@@ -6,6 +6,7 @@ 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,
@@ -38,6 +39,7 @@ describe('ConfigComponent', () => {
        NgSelectModule,
        FormsModule,
        ReactiveFormsModule,
+        NgxBootstrapIconsModule.pick(allIcons),
        ConfigComponent,
        TextComponent,
        SelectComponent,
@@ -9,6 +9,7 @@ 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,
@@ -16,7 +17,6 @@ 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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
  ],
 })
 export class ConfigComponent
@@ -8,6 +8,7 @@ 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'
@@ -39,6 +40,7 @@ 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()">
-    <pngx-bs-icon class="me-2" name="airplane"></pngx-bs-icon><ng-container i18n>Start tour</ng-container>
+    <i-bs class="me-2" name="airplane"></i-bs><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 {
-        <pngx-bs-icon class="me-2" name="card-checklist"></pngx-bs-icon>
+        <i-bs class="me-2" name="card-checklist"></i-bs>
        @if (systemStatusHasErrors) {
          <span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
-            <pngx-bs-icon name="exclamation-circle-fill" class="text-danger" width="1.75em" height="1.75em"></pngx-bs-icon>
+            <i-bs name="exclamation-circle-fill" class="text-danger" width="1.75em" height="1.75em"></i-bs>
          </span>
        } @else {
          <span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
-            <pngx-bs-icon name="check-circle-fill" class="text-primary" width="1.75em" height="1.75em"></pngx-bs-icon>
+            <i-bs name="check-circle-fill" class="text-primary" width="1.75em" height="1.75em"></i-bs>
          </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>
-      <pngx-bs-icon class="ms-2" name="arrow-up-right"></pngx-bs-icon>
+      <i-bs class="ms-2" name="arrow-up-right"></i-bs>
    </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()">
-                  <pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon><ng-container i18n>Reset</ng-container>
+                  <i-bs width="1em" height="1em" name="x"></i-bs><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">
-                  <pngx-bs-icon name="question-circle"></pngx-bs-icon>
+                  <i-bs name="question-circle"></i-bs>
                </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"><pngx-bs-icon class="me-1" name="cpu"></pngx-bs-icon><ng-container i18n>ML only</ng-container></label>
+                    <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>
                    <input type="radio" class="btn-check" id="suggestionSourceAI" [value]="SuggestionSource.AI" formControlName="documentEditingSuggestionSource">
-                    <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>
+                    <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>
                  </fieldset>
                </div>
              </div>
@@ -15,6 +15,7 @@ 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'
@@ -132,6 +133,7 @@ describe('SettingsComponent', () => {
        ReactiveFormsModule,
        NgbAlertModule,
        NgSelectModule,
+        NgxBootstrapIconsModule.pick(allIcons),
        NgbModalModule,
        DragDropModule,
        SettingsComponent,
@@ -23,6 +23,7 @@ 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,
@@ -33,7 +34,6 @@ 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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
  ],
 })
 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">
-      <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Clear selection</ng-container>
+      <i-bs name="x" class="me-1"></i-bs><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">
-      <pngx-bs-icon name="check2-all" class="me-1"></pngx-bs-icon>{{dismissButtonText}}
+      <i-bs name="check2-all" class="me-1"></i-bs>{{dismissButtonText}}
    </button>
    <button class="btn btn-sm btn-outline-primary me-2" (click)="dismissAllTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="totalTasks() === 0">
-      <pngx-bs-icon name="check2-all" class="me-1"></pngx-bs-icon><ng-container i18n>Dismiss all</ng-container>
+      <i-bs name="check2-all" class="me-1"></i-bs><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>
-          <pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon>
+          <i-bs width="1em" height="1em" name="x"></i-bs>
        </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()">
-      <pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon><small i18n>Reset filters</small>
+      <i-bs width="1em" height="1em" name="x"></i-bs><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><pngx-bs-icon class="ms-1" width="1em" height="1em" name="arrow-right"></pngx-bs-icon>
+          <ng-container i18n>Show all</ng-container><i-bs class="ms-1" width="1em" height="1em" name="arrow-right"></i-bs>
        </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"><pngx-bs-icon class="me-1" width="1em" height="1em" name="box-arrow-in-right"></pngx-bs-icon>{{ task.trigger_source_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>
              </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">
-                    <pngx-bs-icon class="lh-1" width="1em" height="1em" name="exclamation-triangle"></pngx-bs-icon>
+                    <i-bs class="lh-1" width="1em" height="1em" name="exclamation-triangle"></i-bs>
                    <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>
-                <pngx-bs-icon width="1.2em" height="1.2em" name="info-circle"></pngx-bs-icon>
+                <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
              </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 }">
-                  <pngx-bs-icon name="check" class="me-1"></pngx-bs-icon><ng-container i18n>Dismiss</ng-container>
+                  <i-bs name="check" class="me-1"></i-bs><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)">
-                      <pngx-bs-icon name="file-text" class="me-1"></pngx-bs-icon><ng-container i18n>Open Document</ng-container>
+                      <i-bs name="file-text" class="me-1"></i-bs><ng-container i18n>Open Document</ng-container>
                    </a>
                  }
                </ng-container>
@@ -7,15 +7,11 @@ import {
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
-import {
-  ActivatedRoute,
-  convertToParamMap,
-  ParamMap,
-  Router,
-} from '@angular/router'
+import { Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModal, NgbModalRef, NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { BehaviorSubject, of, throwError } from 'rxjs'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import {
  PaperlessTask,
@@ -164,7 +160,6 @@ const sectionCountResponse = {
 }

 describe('TasksComponent', () => {
-  let queryParams: BehaviorSubject<ParamMap>
  let component: TasksComponent
  let fixture: ComponentFixture<TasksComponent>
  let tasksService: TasksService
@@ -175,11 +170,11 @@ describe('TasksComponent', () => {
  let toastService: ToastService

  beforeEach(async () => {
-    queryParams = new BehaviorSubject(convertToParamMap({}))
    TestBed.configureTestingModule({
      imports: [
        NgbModule,
        RouterTestingModule.withRoutes(routes),
+        NgxBootstrapIconsModule.pick(allIcons),
        FormsModule,
        TasksComponent,
        PageHeaderComponent,
@@ -188,17 +183,6 @@ describe('TasksComponent', () => {
        ConfirmDialogComponent,
      ],
      providers: [
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            queryParamMap: queryParams.asObservable(),
-            snapshot: {
-              get queryParamMap() {
-                return queryParams.value
-              },
-            },
-          },
-        },
        {
          provide: PermissionsService,
          useValue: {
@@ -256,71 +240,6 @@ describe('TasksComponent', () => {
    flushTaskLists(25, count)
  }

-  it('consumes a task link on load into the normal resettable Task ID filter', () => {
-    jest
-      .spyOn(tasksService, 'list')
-      .mockReturnValue(of({ count: 0, results: [] }))
-    jest
-      .spyOn(tasksService, 'statusCounts')
-      .mockReturnValue(of(sectionCountResponse))
-    jest.spyOn(router, 'navigate').mockResolvedValue(true)
-    queryParams.next(convertToParamMap({ task_id: 'linked-task' }))
-    fixture.destroy()
-    fixture = TestBed.createComponent(TasksComponent)
-    component = fixture.componentInstance
-    fixture.detectChanges()
-    expect(router.navigate).toHaveBeenCalledTimes(1)
-    expect(router.navigate).toHaveBeenCalledWith(
-      [],
-      expect.objectContaining({
-        queryParams: { task_id: null },
-        replaceUrl: true,
-      })
-    )
-    expect(component.filterTargetName).toBe('Task ID')
-    expect(component.filterText).toBe('linked-task')
-    expect(component.isFiltered).toBe(true)
-    component.setSection(TaskSection.InProgress)
-    expect(tasksService.list).toHaveBeenLastCalledWith(1, 25, {
-      task_id: 'linked-task',
-      status: [PaperlessTaskStatus.Pending, PaperlessTaskStatus.Started],
-    })
-    component.resetFilters()
-    expect(component.filterText).toBe('')
-    expect(component.isFiltered).toBe(false)
-    expect(tasksService.list).toHaveBeenLastCalledWith(1, 25, {
-      acknowledged: false,
-      status: [PaperlessTaskStatus.Pending, PaperlessTaskStatus.Started],
-    })
-    expect(router.navigate).toHaveBeenCalledTimes(1)
-  })
-
-  it('supports manually filtering by Task ID and clearing the text filter', () => {
-    jest
-      .spyOn(tasksService, 'list')
-      .mockReturnValue(of({ count: 0, results: [] }))
-    jest
-      .spyOn(tasksService, 'statusCounts')
-      .mockReturnValue(of(sectionCountResponse))
-    component.setSection(TaskSection.InProgress)
-    component.setFilterTarget(TaskFilterTargetID.TaskId)
-    component.filterText = tasks[0].task_id
-    jest.advanceTimersByTime(150)
-    expect(tasksService.list).toHaveBeenLastCalledWith(1, 25, {
-      task_id: tasks[0].task_id,
-      status: [PaperlessTaskStatus.Pending, PaperlessTaskStatus.Started],
-    })
-    component.pagedTasks.set(tasks)
-    expect(component.tasksForSection(TaskSection.NeedsAttention)).toEqual([
-      tasks[0],
-    ])
-    component.resetFilter()
-    expect(tasksService.list).toHaveBeenLastCalledWith(1, 25, {
-      acknowledged: false,
-      status: [PaperlessTaskStatus.Pending, PaperlessTaskStatus.Started],
-    })
-  })
-
  it('should display task sections with counts', () => {
    expect(component.selectedSection).toBe(TaskSection.All)
    expect(component.selectedTaskType).toBeNull()
@@ -1,7 +1,7 @@
 import { JsonPipe, NgTemplateOutlet } from '@angular/common'
 import { Component, inject, OnDestroy, OnInit, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { ActivatedRoute, Router, RouterLink } from '@angular/router'
+import { Router, RouterLink } from '@angular/router'
 import {
  NgbCollapseModule,
  NgbDropdownModule,
@@ -9,6 +9,7 @@ import {
  NgbPaginationModule,
  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import {
  debounceTime,
  distinctUntilChanged,
@@ -21,7 +22,6 @@ import {
  takeUntil,
  timer,
 } from 'rxjs'
-import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import {
  PaperlessTask,
  PaperlessTaskStatus,
@@ -47,13 +47,11 @@ export enum TaskSection {
 export enum TaskFilterTargetID {
  Name,
  Result,
-  TaskId,
 }

 const FILTER_TARGETS = [
  { id: TaskFilterTargetID.Name, name: $localize`Name` },
  { id: TaskFilterTargetID.Result, name: $localize`Result` },
-  { id: TaskFilterTargetID.TaskId, name: $localize`Task ID` },
 ]

 const SECTION_LABELS = {
@@ -153,7 +151,7 @@ const TRIGGER_SOURCE_OPTIONS: Array<{
    NgbDropdownModule,
    NgbPaginationModule,
    NgbPopoverModule,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
  ],
 })
 export class TasksComponent
@@ -163,7 +161,6 @@ export class TasksComponent
  tasksService = inject(TasksService)
  private modalService = inject(NgbModal)
  private readonly router = inject(Router)
-  private readonly route = inject(ActivatedRoute)
  private readonly toastService = inject(ToastService)

  readonly TaskSection = TaskSection
@@ -278,17 +275,6 @@ export class TasksComponent
  }

  ngOnInit() {
-    const taskId = this.route.snapshot.queryParamMap.get('task_id')
-    if (taskId) {
-      this.filterTargetID = TaskFilterTargetID.TaskId
-      this._filterText = taskId
-      this.router.navigate([], {
-        relativeTo: this.route,
-        queryParams: { task_id: null },
-        queryParamsHandling: 'merge',
-        replaceUrl: true,
-      })
-    }
    this.tasksService.reload()
    this.reloadPage()
    timer(5000, 5000)
@@ -650,9 +636,6 @@ export class TasksComponent

    const query = this._filterText.toLowerCase()

-    if (this.filterTargetID === TaskFilterTargetID.TaskId) {
-      return task.task_id.toLowerCase() === query
-    }
    if (this.filterTargetID == TaskFilterTargetID.Name) {
      return [
        this.taskDisplayName(task),
@@ -723,15 +706,9 @@ export class TasksComponent
    }

    if (this._filterText.length) {
-      const parameter = {
-        [TaskFilterTargetID.Name]: 'name',
-        [TaskFilterTargetID.Result]: 'result',
-        [TaskFilterTargetID.TaskId]: 'task_id',
-      }[this.filterTargetID]
-      params[parameter] = this._filterText
-      if (this.filterTargetID === TaskFilterTargetID.TaskId) {
-        delete params.acknowledged
-      }
+      params[
+        this.filterTargetID === TaskFilterTargetID.Name ? 'name' : 'result'
+      ] = this._filterText
    }

    return params
@@ -5,16 +5,16 @@
    i18n-info
    infoLink="usage/#document-trash">
    <button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments().size === 0">
-        <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Clear selection</ng-container>
+        <i-bs name="x" class="me-1"></i-bs><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">
-        <pngx-bs-icon name="arrow-counterclockwise" class="me-1"></pngx-bs-icon><ng-container i18n>Restore selected</ng-container>
+        <i-bs name="arrow-counterclockwise" class="me-1"></i-bs><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">
-        <pngx-bs-icon name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete selected</ng-container>
+        <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete selected</ng-container>
    </button>
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash().length === 0">
-        <pngx-bs-icon name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Empty trash</ng-container>
+        <i-bs name="trash" class="me-1"></i-bs><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>
-                        <pngx-bs-icon name="eye"></pngx-bs-icon>
+                        <i-bs name="eye"></i-bs>
                      </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>
-                            <pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
+                            <i-bs name="three-dots-vertical"></i-bs>
                        </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();">
-                            <pngx-bs-icon width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></pngx-bs-icon><ng-container i18n>Restore</ng-container>
+                            <i-bs width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></i-bs><ng-container i18n>Restore</ng-container>
                        </button>
                        <button class="btn btn-sm btn-outline-danger" (click)="delete(document); $event.stopPropagation();">
-                            <pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
+                            <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
                        </button>
                    </div>
                    </td>
@@ -9,6 +9,7 @@ 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'
@@ -47,6 +48,7 @@ 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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
  ],
 })
 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 }">
-      <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add User</ng-container>
+      <i-bs name="plus-circle" class="me-1"></i-bs><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 }">
-                <pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
+                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><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 }">
-                <pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
+                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><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 }">
-      <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Group</ng-container>
+      <i-bs name="plus-circle" class="me-1"></i-bs><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 }">
-                <pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
+                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><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 }">
-                <pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
+                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
              </button>
            </div>
          </div>
@@ -3,6 +3,7 @@ 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'
@@ -40,6 +41,7 @@ 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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
  ],
 })
 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()">
-    <pngx-bs-icon width="1.5em" height="1.5em" name="list"></pngx-bs-icon>
+    <i-bs width="1.5em" height="1.5em" name="list"></i-bs>
  </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>
-          <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>
+          <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>
        </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>
-        <pngx-bs-icon width="1.3em" height="1.3em" name="person-circle"></pngx-bs-icon>
+        <i-bs width="1.3em" height="1.3em" name="person-circle"></i-bs>
        <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()">
-          <pngx-bs-icon class="me-2" name="person"></pngx-bs-icon><ng-container i18n>My Profile</ng-container>
+          <i-bs class="me-2" name="person"></i-bs><ng-container i18n>My Profile</ng-container>
        </button>
        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()"
          *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }">
-          <pngx-bs-icon class="me-2" name="gear"></pngx-bs-icon><ng-container i18n>Settings</ng-container>
+          <i-bs class="me-2" name="gear"></i-bs><ng-container i18n>Settings</ng-container>
        </a>
        <a ngbDropdownItem class="nav-link d-flex" href="accounts/logout/" (click)="onLogout()">
-          <pngx-bs-icon class="me-2" name="door-open"></pngx-bs-icon><ng-container i18n>Logout</ng-container>
+          <i-bs class="me-2" name="door-open"></i-bs><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">
-          <pngx-bs-icon class="me-2" name="question-circle"></pngx-bs-icon><ng-container i18n>Documentation</ng-container>
+          <i-bs class="me-2" name="question-circle"></i-bs><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) {
-            <pngx-bs-icon width="0.9em" height="0.9em" name="chevron-double-right"></pngx-bs-icon>
+            <i-bs width="0.9em" height="0.9em" name="chevron-double-right"></i-bs>
          } @else {
-            <pngx-bs-icon width="0.9em" height="0.9em" name="chevron-double-left"></pngx-bs-icon>
+            <i-bs width="0.9em" height="0.9em" name="chevron-double-left"></i-bs>
          }
        </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">
-              <pngx-bs-icon class="me-2" name="house"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Dashboard</ng-container></span>
+              <i-bs class="me-2" name="house"></i-bs><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">
-              <pngx-bs-icon class="me-2" name="files"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Documents</ng-container></span>
+              <i-bs class="me-2" name="files"></i-bs><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">
-                    <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>
+                    <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>
                        @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>
-                      <pngx-bs-icon name="grip-vertical"></pngx-bs-icon>
+                      <i-bs name="grip-vertical"></i-bs>
                    </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">
-                  <pngx-bs-icon class="me-2" name="file-text"></pngx-bs-icon><span>{{d.title | documentTitle}}</span>
+                  <i-bs class="me-2" name="file-text"></i-bs><span>{{d.title | documentTitle}}</span>
                  <span class="close flex-column justify-content-center"
                    (click)="$event.preventDefault(); $event.stopPropagation(); closeDocument(d)">
-                    <pngx-bs-icon name="x"></pngx-bs-icon>
+                    <i-bs name="x"></i-bs>
                  </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">
-                  <pngx-bs-icon class="me-2" name="x"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Close all</ng-container></span>
+                  <i-bs class="me-2" name="x"></i-bs><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">
-                    <pngx-bs-icon name="stack"></pngx-bs-icon><span class="nav-link-label ms-2"><ng-container i18n>Attributes</ng-container></span>
+                    <i-bs name="stack"></i-bs><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
                    >
-                      <pngx-bs-icon [name]="attributesSectionsCollapsed ? 'plus-circle' : 'dash-circle'"></pngx-bs-icon>
+                      <i-bs [name]="attributesSectionsCollapsed ? 'plus-circle' : 'dash-circle'"></i-bs>
                    </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()">
-                        <pngx-bs-icon class="me-2" name="tags"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Tags</ng-container></span>
+                        <i-bs class="me-2" name="tags"></i-bs><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()">
-                        <pngx-bs-icon class="me-2" name="person"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Correspondents</ng-container></span>
+                        <i-bs class="me-2" name="person"></i-bs><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()">
-                        <pngx-bs-icon class="me-2" name="hash"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Document types</ng-container></span>
+                        <i-bs class="me-2" name="hash"></i-bs><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()">
-                        <pngx-bs-icon class="me-2" name="folder"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Storage paths</ng-container></span>
+                        <i-bs class="me-2" name="folder"></i-bs><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()">
-                        <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>
+                        <i-bs class="me-2" name="ui-radios"></i-bs><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">
-                <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>
+                <i-bs class="me-2" name="window-stack"></i-bs><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">
-                  <pngx-bs-icon class="me-2" name="link"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Share links</ng-container></span>
+                  <i-bs class="me-2" name="link"></i-bs><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">
-                <pngx-bs-icon class="me-2" name="boxes"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Workflows</ng-container></span>
+                <i-bs class="me-2" name="boxes"></i-bs><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">
-                <pngx-bs-icon class="me-2" name="envelope"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Mail</ng-container></span>
+                <i-bs class="me-2" name="envelope"></i-bs><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">
-                <pngx-bs-icon class="me-2" name="trash"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Trash</ng-container></span>
+                <i-bs class="me-2" name="trash"></i-bs><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">
-                <pngx-bs-icon class="me-2" name="gear"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Settings</ng-container></span>
+                <i-bs class="me-2" name="gear"></i-bs><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">
-                <pngx-bs-icon class="me-2" name="sliders2-vertical"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Configuration</ng-container></span>
+                <i-bs class="me-2" name="sliders2-vertical"></i-bs><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">
-                <pngx-bs-icon class="me-2" name="people"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Users & Groups</ng-container></span>
+                <i-bs class="me-2" name="people"></i-bs><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">
-                <pngx-bs-icon class="me-2" name="list-task"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Tasks</ng-container></span>
+                <i-bs class="me-2" name="list-task"></i-bs><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">
-                  <pngx-bs-icon class="me-2" name="text-left"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Logs</ng-container></span>
+                  <i-bs class="me-2" name="text-left"></i-bs><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">
-                <pngx-bs-icon class="d-flex me-2" name="question-circle"></pngx-bs-icon><span><ng-container i18n>Documentation</ng-container></span>
+                <i-bs class="d-flex me-2" name="question-circle"></i-bs><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">
-                          <pngx-bs-icon width="1.2em" height="1.2em" name="info-circle" class="me-1"></pngx-bs-icon>
+                          <i-bs width="1.2em" height="1.2em" name="info-circle" class="me-1"></i-bs>
                          @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">
-                        <pngx-bs-icon width="1.2em" height="1.2em" name="info-circle"></pngx-bs-icon>
+                        <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
                      </a>
                    }
                  </div>
@@ -142,7 +142,7 @@ main {
      padding-left: 0;
      padding-right: 0;

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

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

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

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

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

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

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

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

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

@@ -10,11 +10,10 @@ 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, Subject, throwError } from 'rxjs'
+import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
-import { BulkOperationStatus } from 'src/app/data/bulk-operation'
-import { PaperlessTaskStatus } from 'src/app/data/paperless-task'
 import { SavedView } from 'src/app/data/saved-view'
 import { HideableSidebarItemID, SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -23,11 +22,10 @@ import {
  DjangoMessageLevel,
  DjangoMessagesService,
 } from 'src/app/services/django-messages.service'
-import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
 import {
-  PermissionsService,
  PermissionType,
+  PermissionsService,
 } from 'src/app/services/permissions.service'
 import { RemoteVersionService } from 'src/app/services/rest/remote-version.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
@@ -98,7 +96,6 @@ describe('AppFrameComponent', () => {
  let savedViewSpy
  let modalService: NgbModal
  let maybeRefreshSpy
-  let bulkEvents: Subject<BulkOperationStatus>
  let tasksService: TasksService

  beforeEach(async () => {
@@ -111,6 +108,7 @@ describe('AppFrameComponent', () => {
        ReactiveFormsModule,
        DragDropModule,
        NgbModalModule,
+        NgxBootstrapIconsModule.pick(allIcons),
        AppFrameComponent,
        IfPermissionsDirective,
        GlobalSearchComponent,
@@ -186,10 +184,6 @@ describe('AppFrameComponent', () => {
    savedViewSpy = jest.spyOn(savedViewService, 'reload')
    maybeRefreshSpy = jest.spyOn(savedViewService, 'maybeRefreshDocumentCounts')

-    bulkEvents = new Subject<BulkOperationStatus>()
-    jest
-      .spyOn(TestBed.inject(WebsocketStatusService), 'onBulkOperationStatus')
-      .mockReturnValue(bulkEvents.asObservable())
    fixture = TestBed.createComponent(AppFrameComponent)
    component = fixture.componentInstance

@@ -198,70 +192,6 @@ describe('AppFrameComponent', () => {
    fixture.detectChanges()
  })

-  it('refreshes and notifies on completion without client-side task tracking', () => {
-    const list = TestBed.inject(DocumentListViewService)
-    const reload = jest.spyOn(list, 'reload').mockImplementation(() => {})
-    jest.spyOn(list, 'reduceSelectionToFilter').mockImplementation(() => {})
-    const tasksReload = jest
-      .spyOn(tasksService, 'reload')
-      .mockImplementation(() => {})
-    const success = jest.spyOn(toastService, 'showSuccess')
-    const refresh = jest
-      .spyOn(openDocumentsService, 'refreshDocument')
-      .mockImplementation(() => {})
-    jest
-      .spyOn(openDocumentsService, 'getOpenDocuments')
-      .mockReturnValue([document])
-    tasksReload.mockClear()
-    maybeRefreshSpy.mockClear()
-    bulkEvents.next({
-      task_id: 'bulk-task',
-      operation: 'set_permissions',
-      status: PaperlessTaskStatus.Started,
-    })
-    expect(reload).not.toHaveBeenCalled()
-    bulkEvents.next({
-      task_id: 'bulk-task',
-      operation: 'set_permissions',
-      status: PaperlessTaskStatus.Success,
-    })
-    expect(reload).toHaveBeenCalledTimes(1)
-    expect(refresh).toHaveBeenCalledWith(document.id)
-    expect(maybeRefreshSpy).toHaveBeenCalledTimes(1)
-    expect(tasksReload).toHaveBeenCalledTimes(1)
-    expect(success).toHaveBeenCalledWith('Bulk operation completed.')
-    fixture.destroy()
-    bulkEvents.next({
-      task_id: 'bulk-task',
-      operation: 'set_permissions',
-      status: PaperlessTaskStatus.Success,
-    })
-    expect(reload).toHaveBeenCalledTimes(1)
-  })
-
-  it('refreshes and reports failed or revoked bulk operations', () => {
-    const list = TestBed.inject(DocumentListViewService)
-    const reload = jest.spyOn(list, 'reload').mockImplementation(() => {})
-    jest.spyOn(list, 'reduceSelectionToFilter').mockImplementation(() => {})
-    jest.spyOn(tasksService, 'reload').mockImplementation(() => {})
-    const error = jest.spyOn(toastService, 'showError')
-    const success = jest.spyOn(toastService, 'showSuccess')
-    for (const status of [
-      PaperlessTaskStatus.Failure,
-      PaperlessTaskStatus.Revoked,
-    ]) {
-      bulkEvents.next({
-        task_id: 'bulk-task',
-        operation: 'set_permissions',
-        status,
-        error: 'Could not update',
-      })
-    }
-    expect(reload).toHaveBeenCalledTimes(2)
-    expect(error).toHaveBeenCalledWith(expect.any(String), 'Could not update')
-    expect(success).not.toHaveBeenCalled()
-  })
-
  it('should initialize the saved view service', () => {
    expect(savedViewSpy).toHaveBeenCalled()
  })
@@ -8,14 +8,12 @@ import {
 import { NgClass } from '@angular/common'
 import {
  Component,
-  DestroyRef,
  HostListener,
  inject,
  OnInit,
  signal,
  viewChild,
 } from '@angular/core'
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { FormsModule } from '@angular/forms'
 import { ActivatedRoute, Router, RouterModule } from '@angular/router'
 import {
@@ -25,12 +23,11 @@ import {
  NgbNavModule,
  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
-import { filter, Observable } from 'rxjs'
+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 { PaperlessTaskStatus } from 'src/app/data/paperless-task'
 import { SavedView } from 'src/app/data/saved-view'
 import {
  CollapsibleSection,
@@ -44,7 +41,6 @@ import {
  DjangoMessageLevel,
  DjangoMessagesService,
 } from 'src/app/services/django-messages.service'
-import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
 import {
  PermissionAction,
@@ -93,7 +89,7 @@ const SCROLL_THRESHOLD = 16
    NgbPopoverModule,
    NgbCollapseModule,
    NgbNavModule,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
    DragDropModule,
    TourNgBootstrap,
    FormsModule,
@@ -105,8 +101,6 @@ export class AppFrameComponent
  extends ComponentWithPermissions
  implements OnInit, ComponentCanDeactivate
 {
-  private destroyRef = inject(DestroyRef)
-  private documentList = inject(DocumentListViewService)
  router = inject(Router)
  private activatedRoute = inject(ActivatedRoute)
  private openDocumentsService = inject(OpenDocumentsService)
@@ -170,44 +164,6 @@ export class AppFrameComponent
  }

  ngOnInit(): void {
-    this.websocketStatusService
-      .onBulkOperationStatus()
-      .pipe(
-        filter(({ status }) =>
-          [
-            PaperlessTaskStatus.Success,
-            PaperlessTaskStatus.Failure,
-            PaperlessTaskStatus.Revoked,
-          ].includes(status)
-        ),
-        takeUntilDestroyed(this.destroyRef)
-      )
-      .subscribe(({ status, error }) => {
-        this.documentList.reload()
-        this.documentList.reduceSelectionToFilter()
-        // maybe someday we can optimize to only refresh affected documents
-        this.openDocumentsService.getOpenDocuments().forEach((doc) => {
-          this.openDocumentsService.refreshDocument(doc.id)
-        })
-        this.savedViewService.maybeRefreshDocumentCounts()
-        if (
-          this.permissionsService.currentUserCan(
-            PermissionAction.View,
-            PermissionType.PaperlessTask
-          )
-        ) {
-          this.tasksService.reload()
-        }
-        if (status === PaperlessTaskStatus.Success) {
-          this.toastService.showSuccess($localize`Bulk operation completed.`)
-        } else {
-          this.toastService.showError(
-            $localize`Bulk operation failed. Some changes may already have been applied.`,
-            error
-          )
-        }
-      })
-
    this.lastScrollY = window.scrollY
    this.detectClassicScrollbars()

@@ -1,7 +1,7 @@

 <div ngbDropdown #resultsDropdown="ngbDropdown" (openChange)="onDropdownOpenChange">
    <form class="form-inline position-relative">
-        <pngx-bs-icon width="1em" height="1em" name="search"></pngx-bs-icon>
+        <i-bs width="1em" height="1em" name="search"></i-bs>
        <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>
                    }
-                    <pngx-bs-icon width="1em" height="1em" name="arrow-right-short"></pngx-bs-icon>
+                    <i-bs width="1em" height="1em" name="arrow-right-short"></i-bs>
                </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)">
-            <pngx-bs-icon width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></pngx-bs-icon>
+            <i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
            <div class="text-truncate">
                {{item[nameProp]}}
                @if (date) {
@@ -49,13 +49,13 @@
                [disabled]="disablePrimaryButton(type, item)"
                (mouseenter)="onButtonHover($event)">
                    @if (type === DataType.Document) {
-                        <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>
+                        <i-bs width="1em" height="1em" name="file-earmark-richtext" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
                    } @else if (type === DataType.SavedView) {
-                        <pngx-bs-icon width="1em" height="1em" name="eye" class="me-1"></pngx-bs-icon><span><ng-container i18n>Open</ng-container></span>
+                        <i-bs width="1em" height="1em" name="eye" class="me-1"></i-bs><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) {
-                        <pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><span><ng-container i18n>Open</ng-container></span>
+                        <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
                    } @else {
-                        <pngx-bs-icon width="1em" height="1em" name="filter" class="me-1"></pngx-bs-icon><span><ng-container i18n>Filter documents</ng-container></span>
+                        <i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><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) {
-                            <pngx-bs-icon width="1em" height="1em" name="download" class="me-1"></pngx-bs-icon><span><ng-container i18n>Download</ng-container></span>
+                            <i-bs width="1em" height="1em" name="download" class="me-1"></i-bs><span><ng-container i18n>Download</ng-container></span>
                        } @else {
-                            <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>
+                            <i-bs width="1em" height="1em" name="file-earmark-richtext" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
                        }
                    </button>
                }
@@ -1,7 +1,7 @@
 form {
  position: relative;

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

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

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

@@ -10,6 +10,7 @@ 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 {
@@ -137,6 +138,7 @@ 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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
    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>
-    <pngx-bs-icon width="1.3em" height="1.3em" name="bell"></pngx-bs-icon>
+    <i-bs width="1.3em" height="1.3em" name="bell"></i-bs>
  </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()">
-          <pngx-bs-icon width="1em" height="1em" name="check2-all" class="me-1"></pngx-bs-icon><ng-container i18n>Clear All</ng-container>
+          <i-bs width="1em" height="1em" name="check2-all" class="me-1"></i-bs><ng-container i18n>Clear All</ng-container>
        </button>
      }
    </div>
    @if (toasts().length === 0) {
      <div class="text-center text-body-secondary small py-4">
-        <pngx-bs-icon width="1.5em" height="1.5em" name="bell" class="d-block mx-auto mb-2 opacity-50"></pngx-bs-icon>
+        <i-bs width="1.5em" height="1.5em" name="bell" class="d-block mx-auto mb-2 opacity-50"></i-bs>
        <ng-container i18n>No notifications</ng-container>
      </div>
    }
@@ -1,6 +1,7 @@
 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'
@@ -40,7 +41,10 @@ describe('ToastsDropdownComponent', () => {

  beforeEach(async () => {
    TestBed.configureTestingModule({
-      imports: [ToastsDropdownComponent],
+      imports: [
+        ToastsDropdownComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
      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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
  ],
 })
 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>
-    <pngx-bs-icon width="1.3em" height="1.3em" name="chatSquareDots"></pngx-bs-icon>
+    <i-bs width="1.3em" height="1.3em" name="chatSquareDots"></i-bs>
  </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">
-      <pngx-bs-icon width="1em" height="1em" name="stars" class="text-primary me-2"></pngx-bs-icon>
+      <i-bs width="1em" height="1em" name="stars" class="text-primary me-2"></i-bs>
      <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>
-          <pngx-bs-icon width="1em" height="1em" name="arrow-counterclockwise"></pngx-bs-icon>
+          <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>
        </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">
-                    <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>
+                    <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>
                  </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>
-            <pngx-bs-icon width="1em" height="1em" name="x-lg"></pngx-bs-icon>
+            <i-bs width="1em" height="1em" name="x-lg"></i-bs>
          </button>
        } @else {
          <button class="btn btn-primary" type="button" (click)="sendMessage()" title="Send" i18n-title aria-label="Send" i18n-aria-label>
-            <pngx-bs-icon width="1em" height="1em" name="arrow-return-left"></pngx-bs-icon>
+            <i-bs width="1em" height="1em" name="arrow-return-left"></i-bs>
          </button>
        }
      </div>
@@ -4,6 +4,7 @@ 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,
@@ -21,7 +22,11 @@ describe('ChatComponent', () => {

  beforeEach(async () => {
    TestBed.configureTestingModule({
-      imports: [RouterTestingModule, ChatComponent],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
    NgbDropdownModule,
    MarkdownPipe,
  ],
@@ -1,61 +0,0 @@
-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')
-  })
-})
@@ -1,54 +0,0 @@
-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
-  }
-}
@@ -1,317 +0,0 @@
-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()) {
-      <pngx-bs-icon class="check" width="1em" height="1em" name="check-lg"></pngx-bs-icon>
+      <i-bs class="check" width="1em" height="1em" name="check-lg"></i-bs>
    }
    @if (isNumbered()) {
      <div class="number">{{number()}}<span class="visually-hidden">selected</span></div>
    }
-    <pngx-bs-icon class="x" width=".9em" height="1em" name="x-lg"></pngx-bs-icon>
+    <i-bs class="x" width=".9em" height="1em" name="x-lg"></i-bs>
  </button>
 }
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { ClearableBadgeComponent } from './clearable-badge.component'

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

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

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

@Component({
  selector: 'pngx-clearable-badge',
  templateUrl: './clearable-badge.component.html',
  styleUrls: ['./clearable-badge.component.scss'],
-  imports: [BootstrapIconComponent],
+  imports: [NgxBootstrapIconsModule],
 })
 export class ClearableBadgeComponent {
  readonly number = input<number>(undefined)
@@ -10,7 +10,7 @@
    popoverClass="popover-slim"
 >
    @if (iconName) {
-        <pngx-bs-icon [class.me-1]="label" name="{{iconName}}"></pngx-bs-icon>
+        <i-bs [class.me-1]="label" name="{{iconName}}"></i-bs>
    }
    <ng-container>{{label}}</ng-container>
 </button>
@@ -1,6 +1,7 @@
 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', () => {
@@ -9,7 +10,11 @@ describe('ConfirmButtonComponent', () => {

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

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

@Component({
  selector: 'pngx-confirm-button',
  templateUrl: './confirm-button.component.html',
  styleUrl: './confirm-button.component.scss',
-  imports: [NgbPopoverModule, BootstrapIconComponent],
+  imports: [NgbPopoverModule, NgxBootstrapIconsModule],
 })
 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>
-            <pngx-bs-icon name="grip-vertical" class="me-2"></pngx-bs-icon>
+            <i-bs name="grip-vertical" class="me-2"></i-bs>
            <div class="d-flex flex-column">
              <div>
                @if (document.correspondent) {
@@ -2,6 +2,7 @@ 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'
@@ -13,7 +14,10 @@ describe('MergeAsVersionsConfirmDialogComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [MergeAsVersionsConfirmDialogComponent],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
  ],
 })
 export class MergeAsVersionsConfirmDialogComponent
@@ -15,7 +15,7 @@
              @let document = getDocument(documentID);
              @if (document) {
                <li class="list-group-item d-flex align-items-center" cdkDrag>
-                    <pngx-bs-icon name="grip-vertical" class="me-2"></pngx-bs-icon>
+                    <i-bs name="grip-vertical" class="me-2"></i-bs>
                    <div class="d-flex flex-column">
                        <div>
                          @if (document.correspondent) {
@@ -3,6 +3,7 @@ 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'
@@ -14,7 +15,12 @@ describe('MergeConfirmDialogComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, FormsModule, MergeConfirmDialogComponent],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
  ],
 })
 export class MergeConfirmDialogComponent
@@ -18,7 +18,7 @@
      (ngModelChange)="onUpdateDocumentChange($event)"
    />
    <label class="btn btn-outline-primary btn-sm" for="removeReplace">
-      <pngx-bs-icon name="pencil"></pngx-bs-icon>
+      <i-bs name="pencil"></i-bs>
      <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">
-      <pngx-bs-icon name="plus"></pngx-bs-icon>
+      <i-bs name="plus"></i-bs>
      <span class="ms-2" i18n>Create new document</span>
    </label>
  </div>
@@ -1,6 +1,7 @@
 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', () => {
@@ -10,7 +11,10 @@ describe('PasswordRemovalConfirmDialogComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      providers: [NgbActiveModal],
-      imports: [PasswordRemovalConfirmDialogComponent],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        PasswordRemovalConfirmDialogComponent,
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(PasswordRemovalConfirmDialogComponent)
@@ -1,13 +1,13 @@
 import { Component } from '@angular/core'
 import { FormsModule } from '@angular/forms'
-import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 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, BootstrapIconComponent],
+  imports: [FormsModule, NgxBootstrapIconsModule],
 })
 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>
-                <pngx-bs-icon name="arrow-counterclockwise"></pngx-bs-icon>
+                <i-bs name="arrow-counterclockwise"></i-bs>
            </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>
-                <pngx-bs-icon name="arrow-clockwise"></pngx-bs-icon>
+                <i-bs name="arrow-clockwise"></i-bs>
            </button>
        </div>
    </div>
@@ -2,6 +2,7 @@ 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', () => {
@@ -10,7 +11,10 @@ describe('RotateConfirmDialogComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [RotateConfirmDialogComponent],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        RotateConfirmDialogComponent,
+      ],
      providers: [
        NgbActiveModal,
        provideHttpClient(withInterceptorsFromDi()),
@@ -1,6 +1,6 @@
 import { NgStyle } from '@angular/common'
 import { Component, inject, signal } from '@angular/core'
-import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 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, BootstrapIconComponent],
+  imports: [NgStyle, NgxBootstrapIconsModule],
 })
 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>
-                              <pngx-bs-icon width="0.9em" height="0.9em" name="file-text" class="me-1"></pngx-bs-icon><span>{{ getDocumentTitle(docId) }}</span>
+                              <i-bs width="0.9em" height="0.9em" name="file-text" class="me-1"></i-bs><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>
-      <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>
+      <i-bs name="ui-radios"></i-bs><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>
-                    <pngx-bs-icon width=".9em" height=".9em" name="asterisk" class="me-1"></pngx-bs-icon><ng-container i18n>Create new field</ng-container>
+                    <i-bs width=".9em" height=".9em" name="asterisk" class="me-1"></i-bs><ng-container i18n>Create new field</ng-container>
                </button>
            }
        </div>
@@ -10,6 +10,7 @@ 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'
@@ -48,6 +49,7 @@ 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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
    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">
-      <pngx-bs-icon name="{{icon}}"></pngx-bs-icon><div class="d-none d-sm-inline ms-1">{{title}}</div>
+      <i-bs name="{{icon}}"></i-bs><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>
-          <pngx-bs-icon name="calendar"></pngx-bs-icon><span class="d-none d-md-inline ms-2" i18n>Fixed</span>
+          <i-bs name="calendar"></i-bs><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>
-          <pngx-bs-icon name="clock-history"></pngx-bs-icon><span class="d-none d-md-inline ms-2" i18n>Relative</span>
+          <i-bs name="clock-history"></i-bs><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>
-            <pngx-bs-icon name="calendar-event"></pngx-bs-icon>
+            <i-bs name="calendar-event"></i-bs>
          </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>
-    <pngx-bs-icon name="x-circle"></pngx-bs-icon>
+    <i-bs name="x-circle"></i-bs>
  </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">
-        <pngx-bs-icon name="node-plus"></pngx-bs-icon>
+        <i-bs name="node-plus"></i-bs>
      </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">
-        <pngx-bs-icon name="braces"></pngx-bs-icon>
+        <i-bs name="braces"></i-bs>
      </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>
-          <pngx-bs-icon name="x-circle"></pngx-bs-icon>
+          <i-bs name="x-circle"></i-bs>
        </button>
      }
    </div>
@@ -5,6 +5,7 @@ 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 {
@@ -66,6 +67,7 @@ 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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
    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">
-    <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>
+    <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs><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>
-              <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>
+              <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>
            </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>
-              <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>
+              <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>
            </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>
-            <pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
          </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>
-              <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>
+              <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>
            </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>
-            <pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
          </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>
-              <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>
+              <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>
            </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>
-              <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>
+              <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>
            </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>
-            <pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
          </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>
-              <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>
+              <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>
            </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>
-            <pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
          </button>
          <ng-template #addedToFooterTemplate>
            <div class="btn-group-xs border-top p-2 d-flex">
@@ -4,6 +4,7 @@ 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'
@@ -25,6 +26,7 @@ describe('DatesDropdownComponent', () => {
        NgbModule,
        FormsModule,
        ReactiveFormsModule,
+        NgxBootstrapIconsModule.pick(allIcons),
        DatesDropdownComponent,
        ClearableBadgeComponent,
        CustomDatePipe,
@@ -1,4 +1,3 @@
-import { _IdGenerator } from '@angular/cdk/a11y'
 import { NgClass, NgTemplateOutlet } from '@angular/common'
 import {
  Component,
@@ -16,14 +15,15 @@ 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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
    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><pngx-bs-icon class="ms-1" name="plus-circle"></pngx-bs-icon>
+            <span i18n>Add option</span><i-bs class="ms-1" name="plus-circle"></i-bs>
          </button>
          <div formArrayName="select_options">
            @for (option of objectForm.controls.extra_data.controls.select_options.controls; track option; let i = $index) {
@@ -6,6 +6,7 @@ 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'
@@ -27,6 +28,7 @@ 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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
  ],
 })
 export class CustomFieldEditDialogComponent
@@ -4,6 +4,7 @@ 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'
@@ -26,6 +27,7 @@ describe('GroupEditDialogComponent', () => {
        ReactiveFormsModule,
        NgSelectModule,
        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
        GroupEditDialogComponent,
        IfPermissionsDirective,
        IfOwnerDirective,
@@ -4,6 +4,7 @@ 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,6 +28,7 @@ describe('TagEditDialogComponent', () => {
        ReactiveFormsModule,
        NgSelectModule,
        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
        TagEditDialogComponent,
        IfPermissionsDirective,
        IfOwnerDirective,
@@ -8,6 +8,7 @@ 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'
@@ -38,6 +39,7 @@ 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()">
-                  <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Trigger</ng-container>
+                  <i-bs name="plus-circle" class="me-1"></i-bs><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()">
-                  <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Action</ng-container>
+                  <i-bs name="plus-circle" class="me-1"></i-bs><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>
-                        <pngx-bs-icon name="grip-vertical" class="ms-n3 pe-1"></pngx-bs-icon>
+                        <i-bs name="grip-vertical" class="ms-n3 pe-1"></i-bs>
                        {{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)"
              >
-                <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><span i18n>Add filter</span>
+                <i-bs name="plus-circle" class="me-1"></i-bs><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)"
                    >
-                      <pngx-bs-icon name="trash"></pngx-bs-icon><span class="ms-1" i18n>Delete</span>
+                      <i-bs name="trash"></i-bs><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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
  ],
 })
 export class WorkflowEditDialogComponent
@@ -3,6 +3,7 @@ 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'
@@ -19,7 +20,11 @@ describe('EmailDocumentDialogComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [EmailDocumentDialogComponent, IfPermissionsDirective],
+      imports: [
+        EmailDocumentDialogComponent,
+        IfPermissionsDirective,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
      providers: [
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
@@ -1,6 +1,7 @@
 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'
@@ -9,7 +10,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],
+  imports: [FormsModule, NgxBootstrapIconsModule],
 })
 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">
-    <pngx-bs-icon name="{{icon}}"></pngx-bs-icon><div class="d-none d-sm-inline ms-1">{{title}}</div>
+    <i-bs name="{{icon}}"></i-bs><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>
-            <pngx-bs-icon width="1.5em" height="1em" name="plus"></pngx-bs-icon>
+            <i-bs width="1.5em" height="1em" name="plus"></i-bs>
          </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>
-            <pngx-bs-icon width="1.5em" height="1em" name="arrow-right"></pngx-bs-icon>
+            <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
          </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>
-          <pngx-bs-icon width="1.5em" height="1em" name="arrow-right"></pngx-bs-icon>
+          <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
        </button>
      }
      @if (!editing && manyToOne) {
@@ -2,6 +2,7 @@ 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 {
@@ -62,7 +63,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
      ],
-      imports: [ScrollingModule],
+      imports: [NgxBootstrapIconsModule.pick(allIcons), 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,
-    BootstrapIconComponent,
+    NgxBootstrapIconsModule,
    NgbDropdownModule,
    NgClass,
    ScrollingModule,
@@ -6,13 +6,13 @@
  [disabled]="disabled">
  <div class="selected-icon me-1">
    @if (isChecked()) {
-      <pngx-bs-icon width="1em" height="1em" name="check"></pngx-bs-icon>
+      <i-bs width="1em" height="1em" name="check"></i-bs>
    }
    @if (isPartiallyChecked()) {
-      <pngx-bs-icon width="1em" height="1em" name="dash"></pngx-bs-icon>
+      <i-bs width="1em" height="1em" name="dash"></i-bs>
    }
    @if (isExcluded()) {
-      <pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon>
+      <i-bs width="1em" height="1em" name="x"></i-bs>
    }
  </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 { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 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, BootstrapIconComponent],
+  imports: [TagComponent, NgxBootstrapIconsModule],
 })
 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)">
-            <pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
+            <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
            </button>
          }
        </div>