From d6620f4c099808233e66cb5388e8bc72051cea86 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 13 Jan 2024 23:57:20 -0800
Subject: [PATCH] Replace all referenced icons

---
 src-ui/package-lock.json                      |  17 ++
 src-ui/package.json                           |   1 +
 src-ui/src/app/app.module.ts                  | 165 ++++++++++++++++++
 .../admin/config/config.component.html        |   4 +-
 .../admin/settings/settings.component.html    |   8 +-
 .../admin/tasks/tasks.component.html          |  20 +--
 .../users-groups/users-groups.component.html  |  24 +--
 .../app-frame/app-frame.component.html        | 130 ++++----------
 .../clearable-badge.component.html            |   8 +-
 .../custom-fields-dropdown.component.html     |  12 +-
 .../date-dropdown.component.html              |  20 +--
 .../workflow-edit-dialog.component.html       |  16 +-
 .../filterable-dropdown.component.html        |   8 +-
 .../toggleable-dropdown-button.component.html |  12 +-
 .../common/input/check/check.component.html   |   4 +-
 .../common/input/color/color.component.html   |   5 +-
 .../common/input/date/date.component.html     |  12 +-
 .../document-link.component.html              |  12 +-
 .../common/input/file/file.component.html     |   8 +-
 .../common/input/number/number.component.html |   4 +-
 .../input/password/password.component.html    |   4 +-
 .../common/input/select/select.component.html |  12 +-
 .../common/input/switch/switch.component.html |  12 +-
 .../common/input/tags/tags.component.html     |  12 +-
 .../common/input/text/text.component.html     |   4 +-
 .../common/input/url/url.component.html       |   8 +-
 ...permissions-filter-dropdown.component.html |  28 +--
 .../preview-popup.component.html              |   4 +-
 .../profile-edit-dialog.component.html        |  11 +-
 .../share-links-dropdown.component.html       |  23 +--
 .../common/toasts/toasts.component.html       |  51 +++---
 .../saved-view-widget.component.html          |   8 +-
 .../upload-file-widget.component.html         |   9 +-
 .../widget-frame/widget-frame.component.html  |   4 +-
 .../document-detail.component.html            |  32 +---
 .../metadata-collapse.component.html          |   8 +-
 .../bulk-editor/bulk-editor.component.html    |  28 +--
 .../document-card-large.component.html        |  48 ++---
 .../document-card-small.component.html        |  42 ++---
 .../document-list.component.html              |  32 +---
 .../filter-editor.component.html              |   8 +-
 .../document-notes.component.html             |   4 +-
 .../custom-fields.component.html              |  12 +-
 .../manage/mail/mail.component.html           |  32 +---
 .../management-list.component.html            |  28 +--
 .../manage/workflows/workflows.component.html |  12 +-
 .../not-found/not-found.component.html        |   4 +-
 47 files changed, 394 insertions(+), 576 deletions(-)

diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json
index 6a8a18a12..f51e4056e 100644
--- a/src-ui/package-lock.json
+++ b/src-ui/package-lock.json
@@ -25,6 +25,7 @@
         "bootstrap": "^5.3.2",
         "file-saver": "^2.0.5",
         "mime-names": "^1.0.0",
+        "ngx-bootstrap-icons": "^1.9.3",
         "ngx-color": "^9.0.0",
         "ngx-cookie-service": "^17.0.1",
         "ngx-file-drop": "^16.0.0",
@@ -13850,6 +13851,22 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-bootstrap-icons": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap-icons/-/ngx-bootstrap-icons-1.9.3.tgz",
+      "integrity": "sha512-UsFqJ/cn0u5W39hVMIDbm+ze1dCF9fDV839scqeimi70Efcmg41zOx6GgR6i2gWAVFR0OBso1cdqb4E75XhTSw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 16.18.1",
+        "npm": ">= 8.11.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">= 13.3.8",
+        "@angular/core": ">= 13.3.8"
+      }
+    },
     "node_modules/ngx-color": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/ngx-color/-/ngx-color-9.0.0.tgz",
diff --git a/src-ui/package.json b/src-ui/package.json
index 904c2b9a0..baefa35c3 100644
--- a/src-ui/package.json
+++ b/src-ui/package.json
@@ -27,6 +27,7 @@
     "bootstrap": "^5.3.2",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
+    "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^9.0.0",
     "ngx-cookie-service": "^17.0.1",
     "ngx-file-drop": "^16.0.0",
diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index a97897c36..d9a2ea28f 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -111,6 +111,170 @@ import { PreviewPopupComponent } from './components/common/preview-popup/preview
 import { SwitchComponent } from './components/common/input/switch/switch.component'
 import { ConfigComponent } from './components/admin/config/config.component'
 import { FileComponent } from './components/common/input/file/file.component'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import {
+  archive,
+  arrowCounterclockwise,
+  arrowDown,
+  arrowLeft,
+  arrowRepeat,
+  arrowRight,
+  arrowRightShort,
+  arrowUpRight,
+  asterisk,
+  boxArrowUp,
+  boxArrowUpRight,
+  boxes,
+  calendar,
+  calendarEvent,
+  caretDown,
+  caretUp,
+  chatLeftText,
+  check,
+  check2All,
+  checkAll,
+  checkLg,
+  chevronDoubleLeft,
+  chevronDoubleRight,
+  clipboardCheckFill,
+  clipboardFill,
+  dash,
+  diagram3,
+  dice5,
+  doorOpen,
+  download,
+  envelope,
+  exclamationTriangle,
+  eye,
+  fileEarmark,
+  fileEarmarkCheck,
+  fileEarmarkFill,
+  files,
+  fileText,
+  filter,
+  folder,
+  folderFill,
+  funnel,
+  gear,
+  grid,
+  gripVertical,
+  hash,
+  hddStack,
+  house,
+  infoCircle,
+  link,
+  listTask,
+  listUl,
+  pencil,
+  people,
+  peopleFill,
+  person,
+  personCircle,
+  personFill,
+  personFillLock,
+  personLock,
+  plus,
+  plusCircle,
+  questionCircle,
+  search,
+  slashCircle,
+  sliders2Vertical,
+  sortAlphaDown,
+  sortAlphaUpAlt,
+  tagFill,
+  tags,
+  textIndentLeft,
+  textLeft,
+  threeDots,
+  threeDotsVertical,
+  trash,
+  uiRadios,
+  upcScan,
+  x,
+  xLg,
+} from 'ngx-bootstrap-icons'
+
+const icons = {
+  archive,
+  arrowCounterclockwise,
+  arrowDown,
+  arrowLeft,
+  arrowRepeat,
+  arrowRight,
+  arrowRightShort,
+  arrowUpRight,
+  asterisk,
+  boxArrowUp,
+  boxArrowUpRight,
+  boxes,
+  calendar,
+  calendarEvent,
+  caretDown,
+  caretUp,
+  chatLeftText,
+  check,
+  check2All,
+  checkAll,
+  checkLg,
+  chevronDoubleLeft,
+  chevronDoubleRight,
+  clipboardCheckFill,
+  clipboardFill,
+  dash,
+  diagram3,
+  dice5,
+  doorOpen,
+  download,
+  envelope,
+  exclamationTriangle,
+  eye,
+  fileEarmark,
+  fileEarmarkCheck,
+  fileEarmarkFill,
+  files,
+  fileText,
+  filter,
+  folder,
+  folderFill,
+  funnel,
+  gear,
+  grid,
+  gripVertical,
+  hash,
+  hddStack,
+  house,
+  infoCircle,
+  link,
+  listTask,
+  listUl,
+  pencil,
+  people,
+  peopleFill,
+  person,
+  personCircle,
+  personFill,
+  personFillLock,
+  personLock,
+  plus,
+  plusCircle,
+  questionCircle,
+  search,
+  slashCircle,
+  sliders2Vertical,
+  sortAlphaDown,
+  sortAlphaUpAlt,
+  tagFill,
+  tags,
+  textIndentLeft,
+  textLeft,
+  threeDots,
+  threeDotsVertical,
+  trash,
+  uiRadios,
+  upcScan,
+  x,
+  xLg,
+}
 
 import localeAf from '@angular/common/locales/af'
 import localeAr from '@angular/common/locales/ar'
@@ -282,6 +446,7 @@ function initializeApp(settings: SettingsService) {
     ColorSliderModule,
     TourNgBootstrapModule,
     DragDropModule,
+    NgxBootstrapIconsModule.pick(icons),
   ],
   providers: [
     {
diff --git a/src-ui/src/app/components/admin/config/config.component.html b/src-ui/src/app/components/admin/config/config.component.html
index 53beb60e0..d1edf49e6 100644
--- a/src-ui/src/app/components/admin/config/config.component.html
+++ b/src-ui/src/app/components/admin/config/config.component.html
@@ -17,9 +17,7 @@
                                                 <h6>
                                                     {{option.title}}
                                                     <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">
-                                                        <svg class="sidebaricon" fill="currentColor">
-                                                            <use xlink:href="assets/bootstrap-icons.svg#info-circle"/>
-                                                        </svg>
+                                                        <i-bs class="sidebaricon" name="info-circle"></i-bs>
                                                     </a>
                                                 </h6>
                                             </div>
diff --git a/src-ui/src/app/components/admin/settings/settings.component.html b/src-ui/src/app/components/admin/settings/settings.component.html
index 07b062a00..219c520c9 100644
--- a/src-ui/src/app/components/admin/settings/settings.component.html
+++ b/src-ui/src/app/components/admin/settings/settings.component.html
@@ -2,9 +2,7 @@
   <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button>
   <a *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }" class="btn btn-sm btn-primary ms-3" href="admin/" target="_blank">
     <ng-container i18n>Open Django Admin</ng-container>
-    <svg class="sidebaricon ms-1" fill="currentColor">
-      <use xlink:href="assets/bootstrap-icons.svg#arrow-up-right"/>
-    </svg>
+    <i-bs class="sidebaricon ms-1" name="arrow-up-right"></i-bs>
   </a>
 </pngx-page-header>
 
@@ -135,9 +133,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()">
-              <svg fill="currentColor" class="buttonicon-sm me-1">
-                <use xlink:href="assets/bootstrap-icons.svg#x"/>
-                </svg><ng-container i18n>Reset</ng-container>
+              <i-bs class="buttonicon-sm me-1" name="x"></i-bs><ng-container i18n>Reset</ng-container>
               </button>
             </div>
           </div>
diff --git a/src-ui/src/app/components/admin/tasks/tasks.component.html b/src-ui/src/app/components/admin/tasks/tasks.component.html
index 6531f146a..e77940f5f 100644
--- a/src-ui/src/app/components/admin/tasks/tasks.component.html
+++ b/src-ui/src/app/components/admin/tasks/tasks.component.html
@@ -1,14 +1,10 @@
 <pngx-page-header title="File Tasks" i18n-title>
   <div class="btn-toolbar col col-md-auto align-items-center">
     <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
-      <svg class="sidebaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#x"/>
-        </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
+      <i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
       </button>
       <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
-        <svg class="sidebaricon" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
-          </svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
+        <i-bs class="sidebaricon" name="check2-all"></i-bs>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
         </button>
         <div class="form-check form-switch mb-0" (click)="toggleAutoRefresh()">
           <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval">
@@ -75,24 +71,18 @@
               }
               <td class="d-lg-none">
                 <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
-                  <svg fill="currentColor" class="" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
-                    <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
-                  </svg>
+                  <i-bs class="" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16" name="info-circle"></i-bs>
                 </button>
               </td>
               <td scope="row">
                 <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 }">
-                    <svg class="sidebaricon" fill="currentColor">
-                      <use xlink:href="assets/bootstrap-icons.svg#check"/>
-                      </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
+                    <i-bs class="sidebaricon" name="check"></i-bs>&nbsp;<ng-container i18n>Dismiss</ng-container>
                     </button>
                     <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
                       @if (task.related_document) {
                         <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
-                          <svg class="sidebaricon" fill="currentColor">
-                            <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
-                            </svg>&nbsp;<ng-container i18n>Open Document</ng-container>
+                          <i-bs class="sidebaricon" name="file-text"></i-bs>&nbsp;<ng-container i18n>Open Document</ng-container>
                           </button>
                         }
                       </ng-container>
diff --git a/src-ui/src/app/components/admin/users-groups/users-groups.component.html b/src-ui/src/app/components/admin/users-groups/users-groups.component.html
index ce794f873..9e4ef9839 100644
--- a/src-ui/src/app/components/admin/users-groups/users-groups.component.html
+++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.html
@@ -5,9 +5,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 }">
-      <svg class="sidebaricon me-1" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-      </svg>
+      <i-bs class="sidebaricon me-1" name="plus-circle"></i-bs>
       <ng-container i18n>Add User</ng-container>
     </button>
   </h4>
@@ -29,14 +27,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 }">
-                <svg class="buttonicon-sm" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-                  </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+                <i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<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 }">
-                  <svg class="buttonicon-sm" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                    </svg>&nbsp;<ng-container i18n>Delete</ng-container>
+                  <i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
                   </button>
                 </div>
               </div>
@@ -50,9 +44,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 }">
-          <svg class="sidebaricon me-1" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-          </svg>
+          <i-bs class="sidebaricon me-1" name="plus-circle"></i-bs>
           <ng-container i18n>Add Group</ng-container>
         </button>
       </h4>
@@ -75,14 +67,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 }">
-                      <svg class="buttonicon-sm" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-                        </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+                      <i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<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 }">
-                        <svg class="buttonicon-sm" fill="currentColor">
-                          <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                          </svg>&nbsp;<ng-container i18n>Delete</ng-container>
+                        <i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
                         </button>
                       </div>
                     </div>
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index ba21c8bac..a656ffbae 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -27,17 +27,13 @@
   <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1"
     *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
     <form (ngSubmit)="search()" class="form-inline flex-grow-1">
-      <svg width="1em" height="1em" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#search" />
-      </svg>
+      <i-bs class="sidebaricon" name="search"></i-bs>
       <input class="form-control form-control-sm" type="text" placeholder="Search documents" aria-label="Search"
         [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (keyup)="searchFieldKeyup($event)"
         (selectItem)="itemSelected($event)" i18n-placeholder>
       @if (!searchFieldEmpty) {
         <button type="button" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0" (click)="resetSearchField()">
-          <svg fill="currentColor" class="buttonicon-sm me-1">
-            <use xlink:href="assets/bootstrap-icons.svg#x" />
-          </svg>
+          <i-bs class="buttonicon-sm me-1" name="x"></i-bs>
         </button>
       }
     </form>
@@ -48,9 +44,7 @@
         <span class="small me-2 d-none d-sm-inline">
           {{this.settingsService.displayName}}
         </span>
-        <svg width="1.3em" height="1.3em" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#person-circle" />
-        </svg>
+        <i-bs name="person-circle"></i-bs>
       </button>
       <div ngbDropdownMenu class="dropdown-menu-end shadow me-2" aria-labelledby="userDropdown">
         <div class="d-sm-none">
@@ -58,27 +52,19 @@
           <div class="dropdown-divider"></div>
         </div>
         <button ngbDropdownItem class="nav-link" (click)="editProfile()">
-          <svg class="sidebaricon me-2" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#person" />
-          </svg><ng-container i18n>My Profile</ng-container>
+          <i-bs class="sidebaricon 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.View, type: PermissionType.UISettings }">
-          <svg class="sidebaricon me-2" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#gear" />
-          </svg><ng-container i18n>Settings</ng-container>
+          <i-bs class="sidebaricon me-2" name="gear"></i-bs><ng-container i18n>Settings</ng-container>
         </a>
         <a ngbDropdownItem class="nav-link" href="accounts/logout/" (click)="onLogout()">
-          <svg class="sidebaricon me-2" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#door-open" />
-          </svg><ng-container i18n>Logout</ng-container>
+          <i-bs class="sidebaricon 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">
-          <svg class="sidebaricon me-2" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#question-circle" />
-          </svg><ng-container i18n>Documentation</ng-container>
+          <i-bs class="sidebaricon me-2" name="question-circle"></i-bs><ng-container i18n>Documentation</ng-container>
         </a>
       </div>
     </li>
@@ -91,13 +77,11 @@
       [ngClass]="slimSidebarEnabled ? 'slim' : 'col-md-3 col-lg-2 col-xxxl-1'" [class.animating]="slimSidebarAnimating"
       [ngbCollapse]="isMenuCollapsed">
       <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()">
-        <svg class="sidebaricon-sm" fill="currentColor">
-          @if (slimSidebarEnabled) {
-            <use xlink:href="assets/bootstrap-icons.svg#chevron-double-right" />
-          } @else {
-            <use xlink:href="assets/bootstrap-icons.svg#chevron-double-left" />
-          }
-        </svg>
+        @if (slimSidebarEnabled) {
+          <i-bs name="chevron-double-right"></i-bs>
+        } @else {
+          <i-bs name="chevron-double-left"></i-bs>
+        }
       </button>
       <div class="sidebar-sticky pt-3 d-flex flex-column justify-space-around">
         <ul class="nav flex-column">
@@ -105,18 +89,14 @@
             <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#house" />
-              </svg><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
+              <i-bs class="sidebaricon" name="house"></i-bs><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
             </a>
           </li>
           <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
             <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#files" />
-              </svg><span>&nbsp;<ng-container i18n>Documents</ng-container></span>
+              <i-bs class="sidebaricon" name="files"></i-bs><span>&nbsp;<ng-container i18n>Documents</ng-container></span>
             </a>
           </li>
         </ul>
@@ -138,15 +118,11 @@
                   routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
                   [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
                   popoverClass="popover-slim">
-                  <svg class="sidebaricon" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#funnel" />
-                  </svg><span>&nbsp;{{view.name}}</span>
+                  <i-bs class="sidebaricon" name="funnel"></i-bs><span>&nbsp;{{view.name}}</span>
                 </a>
                 @if (settingsService.organizingSidebarSavedViews) {
                   <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
-                    <svg class="sidebaricon text-muted" fill="currentColor">
-                      <use xlink:href="assets/bootstrap-icons.svg#grip-vertical" />
-                    </svg>
+                    <i-bs class="sidebaricon text-muted" name="grip-vertical"></i-bs>
                   </div>
                 }
               </li>
@@ -167,13 +143,9 @@
                   routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle"
                   [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
                   popoverClass="popover-slim">
-                  <svg class="sidebaricon" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#file-text" />
-                  </svg><span>&nbsp;{{d.title | documentTitle}}</span>
+                  <i-bs class="sidebaricon" name="file-text"></i-bs><span>&nbsp;{{d.title | documentTitle}}</span>
                   <span class="close" (click)="closeDocument(d); $event.preventDefault()">
-                    <svg fill="currentColor" class="toolbaricon">
-                      <use xlink:href="assets/bootstrap-icons.svg#x" />
-                    </svg>
+                    <i-bs class="toolbaricon" name="x"></i-bs>
                   </span>
                 </a>
               </li>
@@ -183,9 +155,7 @@
                 <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()"
                   ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                   container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                  <svg class="sidebaricon" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#x" />
-                  </svg><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
+                  <i-bs class="sidebaricon" name="x"></i-bs><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
                 </a>
               </li>
             }
@@ -201,9 +171,7 @@
             <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#person" />
-              </svg><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
+              <i-bs class="sidebaricon" name="person"></i-bs><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
             </a>
           </li>
           <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"
@@ -211,9 +179,7 @@
             <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags"
               i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
               triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#tags" />
-              </svg><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
+              <i-bs class="sidebaricon" name="tags"></i-bs><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
             </a>
           </li>
           <li class="nav-item"
@@ -221,27 +187,21 @@
             <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#hash" />
-              </svg><span>&nbsp;<ng-container i18n>Document Types</ng-container></span>
+              <i-bs class="sidebaricon" name="hash"></i-bs><span>&nbsp;<ng-container i18n>Document Types</ng-container></span>
             </a>
           </li>
           <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
             <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#folder" />
-              </svg><span>&nbsp;<ng-container i18n>Storage Paths</ng-container></span>
+              <i-bs class="sidebaricon" name="folder"></i-bs><span>&nbsp;<ng-container i18n>Storage Paths</ng-container></span>
             </a>
           </li>
           <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
             <a class="nav-link" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#ui-radios" />
-              </svg><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
+              <i-bs class="sidebaricon" name="ui-radios"></i-bs><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
             </a>
           </li>
           <li class="nav-item"
@@ -250,9 +210,7 @@
             <a class="nav-link" routerLink="workflows" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Workflows" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#boxes" />
-              </svg><span>&nbsp;<ng-container i18n>Workflows</ng-container></span>
+              <i-bs class="sidebaricon" name="boxes"></i-bs><span>&nbsp;<ng-container i18n>Workflows</ng-container></span>
             </a>
           </li>
           <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
@@ -260,9 +218,7 @@
             <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
               i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
               triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#envelope" />
-              </svg><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
+              <i-bs class="sidebaricon" name="envelope"></i-bs><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
             </a>
           </li>
         </ul>
@@ -276,27 +232,21 @@
             <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#gear" />
-              </svg><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
+              <i-bs class="sidebaricon" name="gear"></i-bs><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
             </a>
           </li>
           <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
             <a class="nav-link" routerLink="config" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Configuration" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#sliders2-vertical" />
-              </svg><span>&nbsp;<ng-container i18n>Configuration</ng-container></span>
+              <i-bs class="sidebaricon" name="sliders2-vertical"></i-bs><span>&nbsp;<ng-container i18n>Configuration</ng-container></span>
             </a>
           </li>
           <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
             <a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#people" />
-              </svg><span>&nbsp;<ng-container i18n>Users & Groups</ng-container></span>
+              <i-bs class="sidebaricon" name="people"></i-bs><span>&nbsp;<ng-container i18n>Users & Groups</ng-container></span>
             </a>
           </li>
           <li class="nav-item"
@@ -308,9 +258,7 @@
               @if (tasksService.failedFileTasks.length > 0 && slimSidebarEnabled) {
                 <span class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
               }
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#list-task" />
-              </svg><span>&nbsp;<ng-container i18n>File Tasks@if (tasksService.failedFileTasks.length > 0) {
+              <i-bs class="sidebaricon" name="list-task"></i-bs><span>&nbsp;<ng-container i18n>File Tasks@if (tasksService.failedFileTasks.length > 0) {
                     <span><span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></span>
                   }</ng-container></span>
             </a>
@@ -319,9 +267,7 @@
             <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs"
               i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
               triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#text-left" />
-              </svg><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
+              <i-bs class="sidebaricon" name="text-left"></i-bs><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
             </a>
           </li>
           <li class="nav-item mt-2" tourAnchor="tour.outro">
@@ -329,9 +275,7 @@
               target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
               i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
               triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#question-circle" />
-              </svg><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span>
+              <i-bs class="sidebaricon" name="question-circle"></i-bs><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span>
             </a>
           </li>
           <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
@@ -370,10 +314,7 @@
                         href="https://github.com/paperless-ngx/paperless-ngx/releases"
                         [ngbPopover]="updateAvailablePopContent" popoverClass="shadow" triggers="mouseenter:mouseleave"
                         container="body">
-                        <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;"
-                          viewBox="0 0 16 16">
-                          <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
-                        </svg>
+                        <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
                         @if (appRemoteVersion?.update_available) {
                         <ng-container i18n>Update available</ng-container>
                         }
@@ -383,10 +324,7 @@
                     <a class="small text-decoration-none" routerLink="/settings" fragment="update-checking"
                       [ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter"
                       container="body">
-                      <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;"
-                        viewBox="0 0 16 16">
-                        <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
-                      </svg>
+                      <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
                     </a>
                   }
                 </div>
diff --git a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
index 6425c63e5..4d31411aa 100644
--- a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
+++ b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
@@ -1,15 +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) {
-      <svg width="1em" height="1em" class="check m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-        <use xlink:href="assets/bootstrap-icons.svg#check-lg"/>
-      </svg>
+      <i-bs name="check-lg"></i-bs>
     }
     @if (isNumbered) {
       <div class="number">{{number}}<span class="visually-hidden">selected</span></div>
     }
-    <svg width=".9em" height="1em" class="x m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <use xlink:href="assets/bootstrap-icons.svg#x-lg"/>
-    </svg>
+    <i-bs name="x-lg"></i-bs>
   </button>
 }
diff --git a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
index e0d26bfc3..1417c04b4 100644
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
@@ -1,8 +1,6 @@
 <div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose()">
     <button class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#ui-radios" />
-      </svg>
+      <i-bs class="toolbaricon" name="ui-radios"></i-bs>
       <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Custom Fields</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="customFieldsDropdown" class="shadow custom-fields-dropdown">
@@ -20,14 +18,10 @@
                 </pngx-input-select>
                 <div class="btn-toolbar" role="toolbar">
                     <button class="btn btn-sm btn-outline-secondary me-auto" type="button" (click)="createField()" [disabled]="!canCreateFields">
-                        <svg fill="currentColor" class="buttonicon-sm me-1 mb-1">
-                        <use xlink:href="assets/bootstrap-icons.svg#asterisk"/>
-                        </svg><ng-container i18n>Create New Field</ng-container>
+                        <i-bs class="buttonicon-sm me-1 mb-1" name="asterisk"></i-bs><ng-container i18n>Create New Field</ng-container>
                     </button>
                     <button class="btn btn-sm btn-outline-primary me-1" type="button" (click)="addField(); fieldDropdown.close()" [disabled]="field === undefined">
-                        <svg fill="currentColor" class="buttonicon me-1">
-                          <use xlink:href="assets/bootstrap-icons.svg#plus-circle"/>
-                        </svg><ng-container i18n>Add</ng-container>
+                        <i-bs class="buttonicon me-1" name="plus-circle"></i-bs><ng-container i18n>Add</ng-container>
                     </button>
                 </div>
             </li>
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index f3ac1ed77..88f100d5c 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -9,9 +9,7 @@
         <button class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.id)">
           <div class="selected-icon">
             @if (relativeDate === rd.id) {
-              <svg fill="currentColor" class="buttonicon-sm">
-                <use xlink:href="assets/bootstrap-icons.svg#check"/>
-              </svg>
+              <i-bs class="buttonicon-sm" name="check"></i-bs>
             }
           </div>
           <div class="d-flex justify-content-between w-100 align-items-center ps-2">
@@ -32,9 +30,7 @@
           <div i18n>After</div>
           @if (dateAfter) {
             <a class="btn btn-link p-0 m-0" (click)="clearAfter()">
-              <svg fill="currentColor" class="buttonicon-sm">
-                <use xlink:href="assets/bootstrap-icons.svg#x"/>
-              </svg>
+              <i-bs class="buttonicon-sm" name="x"></i-bs>
               <small i18n>Clear</small>
             </a>
           }
@@ -44,9 +40,7 @@
           <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
             maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
           <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
-            <svg fill="currentColor" class="buttonicon-sm">
-              <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
-            </svg>
+            <i-bs class="buttonicon-sm" name="calendar"></i-bs>
           </button>
         </div>
 
@@ -57,9 +51,7 @@
           <div i18n>Before</div>
           @if (dateBefore) {
             <a class="btn btn-link p-0 m-0" (click)="clearBefore()">
-              <svg fill="currentColor" class="buttonicon-sm">
-                <use xlink:href="assets/bootstrap-icons.svg#x"/>
-              </svg>
+              <i-bs class="buttonicon-sm" name="x"></i-bs>
               <small i18n>Clear</small>
             </a>
           }
@@ -69,9 +61,7 @@
           <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
             maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
           <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
-            <svg fill="currentColor" class="buttonicon-sm">
-              <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
-            </svg>
+            <i-bs class="buttonicon-sm" name="calendar"></i-bs>
           </button>
         </div>
 
diff --git a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
index 76d788e59..f9862b2b3 100644
--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
@@ -27,9 +27,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()">
-                  <svg class="sidebaricon me-1" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-                  </svg>
+                  <i-bs class="sidebaricon me-1" name="plus-circle"></i-bs>
                   <ng-container i18n>Add Trigger</ng-container>
                 </button>
               </div>
@@ -42,9 +40,7 @@
                           <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{trigger.id}}</span>
                         }
                         <button type="button" class="btn btn-link text-danger ms-2" (click)="removeTrigger(i)">
-                          <svg class="sidebaricon me-1" fill="currentColor">
-                            <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                          </svg>
+                          <i-bs class="sidebaricon me-1" name="trash"></i-bs>
                           <ng-container i18n>Delete</ng-container>
                         </button>
                       </button>
@@ -71,9 +67,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()">
-                  <svg class="sidebaricon me-1" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-                  </svg>
+                  <i-bs class="sidebaricon me-1" name="plus-circle"></i-bs>
                   <ng-container i18n>Add Action</ng-container>
                 </button>
               </div>
@@ -86,9 +80,7 @@
                           <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{action.id}}</span>
                         }
                         <button type="button" class="btn btn-link text-danger ms-2" (click)="removeAction(i)">
-                          <svg class="sidebaricon me-1" fill="currentColor">
-                            <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                          </svg>
+                          <i-bs class="sidebaricon me-1" name="trash"></i-bs>
                           <ng-container i18n>Delete</ng-container>
                         </button>
                       </button>
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index 2e082cff3..e83f9759c 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -1,8 +1,6 @@
 <div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)">
   <button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
-    <svg class="toolbaricon" fill="currentColor">
-      <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
-    </svg>
+    <i-bs class="toolbaricon" name="{{icon}}"></i-bs>
     <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
     @if (!editing && selectionModel.totalCount > 0) {
       <pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
@@ -49,9 +47,7 @@
       @if (editing) {
         <button class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
           <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
-          <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
-          </svg>
+          <i-bs name="arrow-right"></i-bs>
         </button>
       }
       @if (!editing && manyToOne) {
diff --git a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
index 2ab6794a5..a8260cccb 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
@@ -1,19 +1,13 @@
 <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="toggleItem($event)" [disabled]="disabled">
   <div class="selected-icon me-1">
     @if (isChecked()) {
-      <svg fill="currentColor" class="buttonicon-sm bi-check">
-        <use xlink:href="assets/bootstrap-icons.svg#check"/>
-      </svg>
+      <i-bs class="buttonicon-sm bi-check" name="check"></i-bs>
     }
     @if (isPartiallyChecked()) {
-      <svg fill="currentColor" class="buttonicon-sm bi-dash">
-        <use xlink:href="assets/bootstrap-icons.svg#dash"/>
-      </svg>
+      <i-bs class="buttonicon-sm bi-dash" name="dash"></i-bs>
     }
     @if (isExcluded()) {
-      <svg fill="currentColor" class="buttonicon-sm bi-x">
-        <use xlink:href="assets/bootstrap-icons.svg#x"/>
-      </svg>
+      <i-bs class="buttonicon-sm bi-x" name="x"></i-bs>
     }
   </div>
   <div class="me-1">
diff --git a/src-ui/src/app/components/common/input/check/check.component.html b/src-ui/src/app/components/common/input/check/check.component.html
index 541288bde..a43a2d702 100644
--- a/src-ui/src/app/components/common/input/check/check.component.html
+++ b/src-ui/src/app/components/common/input/check/check.component.html
@@ -5,9 +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)">
-            <svg class="sidebaricon" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#x"/>
-              </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
             </button>
           }
         </div>
diff --git a/src-ui/src/app/components/common/input/color/color.component.html b/src-ui/src/app/components/common/input/color/color.component.html
index 100297a9a..abc4e69eb 100644
--- a/src-ui/src/app/components/common/input/color/color.component.html
+++ b/src-ui/src/app/components/common/input/color/color.component.html
@@ -16,10 +16,7 @@
     <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom" popoverClass="shadow">
 
     <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dice-5" viewBox="0 0 16 16">
-        <path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/>
-        <path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm4-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
-      </svg>
+      <i-bs name="dice5"></i-bs>
     </button>
 
   </div>
diff --git a/src-ui/src/app/components/common/input/date/date.component.html b/src-ui/src/app/components/common/input/date/date.component.html
index 2a7984a17..5cf0fc47f 100644
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/src-ui/src/app/components/common/input/date/date.component.html
@@ -4,9 +4,7 @@
       <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <svg class="sidebaricon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#x"/>
-            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
@@ -16,15 +14,11 @@
             (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
             name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled">
           <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="buttonicon">
-              <use _ngcontent-ng-c3750736003="" xlink:href="assets/bootstrap-icons.svg#calendar"></use>
-            </svg>
+            <i-bs class="buttonicon" name="calendar"></i-bs>
           </button>
           @if (showFilter) {
             <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ filterButtonTitle }}">
-              <svg class="buttonicon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#filter" />
-              </svg>
+              <i-bs class="buttonicon" name="filter"></i-bs>
             </button>
           }
         </div>
diff --git a/src-ui/src/app/components/common/input/document-link/document-link.component.html b/src-ui/src/app/components/common/input/document-link/document-link.component.html
index 8e4074035..e1be7ce32 100644
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.html
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.html
@@ -6,9 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <svg class="sidebaricon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#x"/>
-            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
@@ -29,13 +27,9 @@
             (change)="onChange(selectedDocuments)">
             <ng-template ng-label-tmp let-document="item">
               <div class="d-flex align-items-center">
-                <svg class="sidebaricon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" (click)="unselect(document)">
-                  <use xlink:href="assets/bootstrap-icons.svg#x"/>
-                </svg>
+                <i-bs class="sidebaricon" (click)="unselect(document)" name="x"></i-bs>
                 <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();">
-                  <svg class="sidebaricon-sm me-1" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
-                    </svg><span>{{document.title}}</span>
+                  <i-bs class="sidebaricon-sm me-1" name="file-text"></i-bs><span>{{document.title}}</span>
                   </a>
                 </div>
               </ng-template>
diff --git a/src-ui/src/app/components/common/input/file/file.component.html b/src-ui/src/app/components/common/input/file/file.component.html
index 9ad82a99c..a4ebcc2be 100644
--- a/src-ui/src/app/components/common/input/file/file.component.html
+++ b/src-ui/src/app/components/common/input/file/file.component.html
@@ -6,9 +6,7 @@
         }
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <svg class="sidebaricon" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#x"/>
-              </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
             </button>
           }
         </div>
@@ -20,9 +18,7 @@
             <div class="form-text d-flex align-items-center">
               <span class="text-muted">{{filename}}</span>
               <button type="button" class="btn btn-link btn-sm text-danger ms-2" (click)="clear()">
-                <svg class="sidebaricon" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#x"/>
-                </svg><small class="ms-1" i18n>Remove</small>
+                <i-bs class="sidebaricon" name="x"></i-bs><small class="ms-1" i18n>Remove</small>
               </button>
             </div>
         }
diff --git a/src-ui/src/app/components/common/input/number/number.component.html b/src-ui/src/app/components/common/input/number/number.component.html
index c9baf38a1..19e368847 100644
--- a/src-ui/src/app/components/common/input/number/number.component.html
+++ b/src-ui/src/app/components/common/input/number/number.component.html
@@ -6,9 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <svg class="sidebaricon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#x"/>
-            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
diff --git a/src-ui/src/app/components/common/input/password/password.component.html b/src-ui/src/app/components/common/input/password/password.component.html
index b94750f94..1a70ff4f6 100644
--- a/src-ui/src/app/components/common/input/password/password.component.html
+++ b/src-ui/src/app/components/common/input/password/password.component.html
@@ -4,9 +4,7 @@
     <input #inputField [type]="showReveal && textVisible ? 'text' : 'password'" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (focus)="onFocus()" (focusout)="onFocusOut()" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete">
     @if (showReveal) {
       <button type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
-        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#eye" />
-        </svg>
+        <i-bs name="eye"></i-bs>
       </button>
     }
   </div>
diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index 617799a72..e150dee85 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -6,9 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <svg class="sidebaricon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#x"/>
-            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
@@ -40,16 +38,12 @@
           </ng-select>
           @if (allowCreateNew) {
             <button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
-              <svg class="buttonicon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#plus" />
-              </svg>
+              <i-bs class="buttonicon" name="plus"></i-bs>
             </button>
           }
           @if (showFilter) {
             <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
-              <svg class="buttonicon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#filter" />
-              </svg>
+              <i-bs class="buttonicon" name="filter"></i-bs>
             </button>
           }
         </div>
diff --git a/src-ui/src/app/components/common/input/switch/switch.component.html b/src-ui/src/app/components/common/input/switch/switch.component.html
index e0b63c5f7..db5c1ec0c 100644
--- a/src-ui/src/app/components/common/input/switch/switch.component.html
+++ b/src-ui/src/app/components/common/input/switch/switch.component.html
@@ -5,16 +5,12 @@
         <label class="form-label" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
           {{title}}
           @if (showUnsetNote && isUnset) {
-            <svg class="sidebaricon-sm ms-1" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#exclamation-triangle"/>
-              </svg>
+            <i-bs class="sidebaricon-sm ms-1" name="exclamation-triangle"></i-bs>
           }
         </label>
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <svg class="sidebaricon" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#x"/>
-            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
@@ -26,9 +22,7 @@
           <label class="form-check-label" [class.text-muted]="showUnsetNote && isUnset" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
             {{title}}
             @if (showUnsetNote && isUnset) {
-              <svg class="sidebaricon-sm ms-1" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#exclamation-triangle"/>
-              </svg>
+              <i-bs class="sidebaricon-sm ms-1" name="exclamation-triangle"></i-bs>
             }
           </label>
         }
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index c4207fc61..dfd9c3419 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -18,9 +18,7 @@
 
           <ng-template ng-label-tmp let-item="item">
             <span class="tag-wrap tag-wrap-delete" (mousedown)="removeTag($event, item.id)">
-              <svg width="1.2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                <use xlink:href="assets/bootstrap-icons.svg#x"/>
-              </svg>
+              <i-bs name="x"></i-bs>
               @if (item.id && tags) {
                 <pngx-tag style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
               }
@@ -36,16 +34,12 @@
         </ng-select>
         @if (allowCreate) {
           <button class="btn btn-outline-secondary" type="button" (click)="createTag()" [disabled]="disabled">
-            <svg class="buttonicon" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#plus" />
-            </svg>
+            <i-bs class="buttonicon" name="plus"></i-bs>
           </button>
         }
         @if (showFilter) {
           <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="hasPrivate || this.value === null" i18n-title title="Filter documents with these Tags">
-            <svg class="buttonicon" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#filter" />
-            </svg>
+            <i-bs class="buttonicon" name="filter"></i-bs>
           </button>
         }
       </div>
diff --git a/src-ui/src/app/components/common/input/text/text.component.html b/src-ui/src/app/components/common/input/text/text.component.html
index 4169d09db..c4b6b1d4b 100644
--- a/src-ui/src/app/components/common/input/text/text.component.html
+++ b/src-ui/src/app/components/common/input/text/text.component.html
@@ -6,9 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <svg class="sidebaricon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#x"/>
-            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
diff --git a/src-ui/src/app/components/common/input/url/url.component.html b/src-ui/src/app/components/common/input/url/url.component.html
index cca0ee259..dfc0b70d7 100644
--- a/src-ui/src/app/components/common/input/url/url.component.html
+++ b/src-ui/src/app/components/common/input/url/url.component.html
@@ -4,9 +4,7 @@
       <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <svg class="sidebaricon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#x"/>
-            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
@@ -14,9 +12,7 @@
         <div class="input-group" [class.is-invalid]="error">
           <input #inputField type="url" class="form-control" [class.is-invalid]="error" placeholder="https://" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled">
           <a class="btn btn-outline-secondary rounded-end" title="Open link" i18n-title [href]="value" target="_blank">
-            <svg class="buttonicon mb-1" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#box-arrow-up-right" />
-            </svg>
+            <i-bs class="buttonicon mb-1" name="box-arrow-up-right"></i-bs>
           </a>
           <div class="invalid-feedback position-absolute top-100">
             {{error}}
diff --git a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
index 4573d916b..1bac613f0 100644
--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
+++ b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
@@ -1,8 +1,6 @@
 <div class="btn-group w-100" ngbDropdown role="group">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="isActive ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
-    <svg class="toolbaricon" fill="currentColor">
-      <use xlink:href="assets/bootstrap-icons.svg#person-fill-lock" />
-    </svg>
+    <i-bs class="toolbaricon" name="person-fill-lock"></i-bs>
     <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
     <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
   </button>
@@ -11,9 +9,7 @@
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NONE)" [disabled]="disabled">
         <div class="selected-icon me-1">
           @if (selectionModel.ownerFilter === OwnerFilterType.NONE) {
-            <svg fill="currentColor" class="buttonicon-sm">
-              <use xlink:href="assets/bootstrap-icons.svg#check"/>
-            </svg>
+            <i-bs class="buttonicon-sm" name="check"></i-bs>
           }
         </div>
         <div class="me-1">
@@ -23,9 +19,7 @@
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SELF)" [disabled]="disabled">
         <div class="selected-icon me-1">
           @if (selectionModel.ownerFilter === OwnerFilterType.SELF) {
-            <svg fill="currentColor" class="buttonicon-sm">
-              <use xlink:href="assets/bootstrap-icons.svg#check"/>
-            </svg>
+            <i-bs class="buttonicon-sm" name="check"></i-bs>
           }
         </div>
         <div class="me-1">
@@ -35,9 +29,7 @@
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NOT_SELF)" [disabled]="disabled">
         <div class="selected-icon me-1">
           @if (selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
-            <svg fill="currentColor" class="buttonicon-sm">
-              <use xlink:href="assets/bootstrap-icons.svg#check"/>
-            </svg>
+            <i-bs class="buttonicon-sm" name="check"></i-bs>
           }
         </div>
         <div class="me-1">
@@ -47,9 +39,7 @@
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SHARED_BY_ME)" [disabled]="disabled">
         <div class="selected-icon me-1">
           @if (selectionModel.ownerFilter === OwnerFilterType.SHARED_BY_ME) {
-            <svg fill="currentColor" class="buttonicon-sm">
-              <use xlink:href="assets/bootstrap-icons.svg#check"/>
-            </svg>
+            <i-bs class="buttonicon-sm" name="check"></i-bs>
           }
         </div>
         <div class="me-1">
@@ -59,9 +49,7 @@
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.UNOWNED)" [disabled]="disabled">
         <div class="selected-icon me-1">
           @if (selectionModel.ownerFilter === OwnerFilterType.UNOWNED) {
-            <svg fill="currentColor" class="buttonicon-sm">
-              <use xlink:href="assets/bootstrap-icons.svg#check"/>
-            </svg>
+            <i-bs class="buttonicon-sm" name="check"></i-bs>
           }
         </div>
         <div class="me-1">
@@ -71,9 +59,7 @@
       <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
         <div class="selected-icon me-1">
           @if (selectionModel.ownerFilter === OwnerFilterType.OTHERS) {
-            <svg fill="currentColor" class="buttonicon-sm">
-              <use xlink:href="assets/bootstrap-icons.svg#check"/>
-            </svg>
+            <i-bs class="buttonicon-sm" name="check"></i-bs>
           }
         </div>
         <div class="me-1 w-100">
diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
index a35029a2e..4f6b2b720 100644
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
@@ -9,9 +9,7 @@
     } @else {
       @if (requiresPassword) {
         <div class="w-100 h-100 position-relative">
-          <svg width="2em" height="2em" fill="currentColor" class="position-absolute top-50 start-50 translate-middle">
-            <use xlink:href="assets/bootstrap-icons.svg#file-earmark-lock"/>
-          </svg>
+          <i-bs name="file-earmark-lock"></i-bs>
         </div>
       }
       @if (!requiresPassword) {
diff --git a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
index 8c98d91b7..c93920be8 100644
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
@@ -33,19 +33,16 @@
         <div class="input-group">
           <input type="text" class="form-control" formControlName="auth_token" readonly>
           <button type="button" class="btn btn-outline-secondary" (click)="copyAuthToken()" i18n-title title="Copy">
-            <svg class="buttonicon-sm" fill="currentColor">
               @if (!copied) {
-                <use xlink:href="assets/bootstrap-icons.svg#clipboard-fill" />
+                <i-bs class="buttonicon-sm" name="clipboard-fill"></i-bs>
               }
               @if (copied) {
-                <use xlink:href="assets/bootstrap-icons.svg#clipboard-check-fill" />
+                <i-bs class="buttonicon-sm" name="clipboard-check-fill"></i-bs>
               }
-              </svg><span class="visually-hidden" i18n>Copy</span>
+              <span class="visually-hidden" i18n>Copy</span>
             </button>
             <button type="button" class="btn btn-outline-secondary" (click)="generateAuthToken()" i18n-title title="Regenerate auth token">
-              <svg class="buttonicon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#arrow-repeat" />
-              </svg>
+              <i-bs class="buttonicon" name="arrow-repeat"></i-bs>
             </button>
           </div>
           <span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied" i18n>Copied!</span>
diff --git a/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html b/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html
index 2dbd29308..1bf0e693d 100644
--- a/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html
+++ b/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html
@@ -1,8 +1,6 @@
 <div ngbDropdown>
   <button class="btn btn-sm btn-outline-primary" id="shareLinksDropdown" [disabled]="disabled" ngbDropdownToggle>
-    <svg class="toolbaricon" fill="currentColor">
-      <use xlink:href="assets/bootstrap-icons.svg#link" />
-    </svg>
+    <i-bs class="toolbaricon" name="link"></i-bs>
     <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Share Links</ng-container></div>
   </button>
   <div ngbDropdownMenu aria-labelledby="shareLinksDropdown" class="shadow share-links-dropdown">
@@ -22,26 +20,21 @@
               </span>
             }
             <button type="button" class="btn btn-sm btn-outline-primary" (click)="copy(link)">
-              <svg class="buttonicon" fill="currentColor">
                 @if (copied !== link.id) {
-                  <use xlink:href="assets/bootstrap-icons.svg#clipboard-fill" />
+                  <i-bs class="buttonicon" name="clipboard-fill"></i-bs>
                 }
                 @if (copied === link.id) {
-                  <use xlink:href="assets/bootstrap-icons.svg#clipboard-check-fill" />
+                  <i-bs class="buttonicon" name="clipboard-check-fill"></i-bs>
                 }
-                </svg><span class="visually-hidden" i18n>Copy</span>
+                <span class="visually-hidden" i18n>Copy</span>
               </button>
               @if (canShare(link)) {
                 <button type="button" class="btn btn-sm btn-outline-primary" (click)="share(link)">
-                  <svg class="buttonicon" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#box-arrow-up" />
-                    </svg><span class="visually-hidden" i18n>Share</span>
+                  <i-bs class="buttonicon" name="box-arrow-up"></i-bs><span class="visually-hidden" i18n>Share</span>
                   </button>
                 }
                 <button type="button" class="btn btn-sm btn-outline-danger" (click)="delete(link)">
-                  <svg class="buttonicon" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                    </svg><span class="visually-hidden" i18n>Delete</span>
+                  <i-bs class="buttonicon" name="trash"></i-bs><span class="visually-hidden" i18n>Delete</span>
                   </button>
                 </div>
                 <span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied === link.id" i18n>Copied!</span>
@@ -66,9 +59,7 @@
                     <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                   }
                   @if (!loading) {
-                    <svg class="buttonicon me-1" fill="currentColor">
-                      <use xlink:href="assets/bootstrap-icons.svg#plus" />
-                    </svg>
+                    <i-bs class="buttonicon me-1" name="plus"></i-bs>
                   }
                   <ng-container i18n>Create</ng-container>
                 </button>
diff --git a/src-ui/src/app/components/common/toasts/toasts.component.html b/src-ui/src/app/components/common/toasts/toasts.component.html
index 1a671c4e9..81b9ca9bf 100644
--- a/src-ui/src/app/components/common/toasts/toasts.component.html
+++ b/src-ui/src/app/components/common/toasts/toasts.component.html
@@ -8,14 +8,12 @@
     <ngb-progressbar class="position-absolute h-100 w-100 top-90 start-0 bottom-0 end-0 pe-none" type="dark" [max]="toast.delay" [value]="toast.delayRemaining"></ngb-progressbar>
     <span class="visually-hidden">{{ toast.delayRemaining / 1000 | number: '1.0-0' }} seconds</span>
     <div class="d-flex align-items-top">
-      <svg class="sidebaricon-sm mt-1 me-2 flex-shrink-0" fill="currentColor">
-        @if (!toast.error) {
-          <use xlink:href="assets/bootstrap-icons.svg#info-circle"/>
-        }
-        @if (toast.error) {
-          <use xlink:href="assets/bootstrap-icons.svg#exclamation-triangle"/>
-        }
-      </svg>
+      @if (!toast.error) {
+        <i-bs class="sidebaricon-sm mt-1 me-2 flex-shrink-0" name="info-circle"></i-bs>
+      }
+      @if (toast.error) {
+        <i-bs class="sidebaricon-sm mt-1 me-2 flex-shrink-0" name="exclamation-triangle"></i-bs>
+      }
       <div>
         <p class="mb-0">{{toast.content}}</p>
         @if (toast.error) {
@@ -34,25 +32,24 @@
               <div class="row">
                 <div class="col offset-sm-3">
                   <button class="btn btn-sm btn-outline-dark" (click)="copyError(toast.error)">
-                    <svg class="sidebaricon" fill="currentColor">
-                      @if (!copied) {
-                        <use xlink:href="assets/bootstrap-icons.svg#clipboard" />
-                      }
-                      @if (copied) {
-                        <use xlink:href="assets/bootstrap-icons.svg#clipboard-check" />
-                      }
-                      </svg>&nbsp;<ng-container i18n>Copy Raw Error</ng-container>
-                    </button>
-                  </div>
+                    @if (!copied) {
+                      <i-bs class="sidebaricon" name="clipboard"></i-bs>
+                    }
+                    @if (copied) {
+                      <i-bs class="sidebaricon" name="clipboard-check"></i-bs>
+                    }
+                    >&nbsp;<ng-container i18n>Copy Raw Error</ng-container>
+                  </button>
                 </div>
               </div>
-            </details>
-          }
-          @if (toast.action) {
-            <p class="mb-0 mt-2"><button class="btn btn-sm btn-outline-secondary" (click)="toastService.closeToast(toast); toast.action()">{{toast.actionName}}</button></p>
-          }
-        </div>
-        <button type="button" class="btn-close ms-auto flex-shrink-0" data-bs-dismiss="toast" aria-label="Close" (click)="toastService.closeToast(toast);"></button>
+            </div>
+          </details>
+        }
+        @if (toast.action) {
+          <p class="mb-0 mt-2"><button class="btn btn-sm btn-outline-secondary" (click)="toastService.closeToast(toast); toast.action()">{{toast.actionName}}</button></p>
+        }
       </div>
-    </ngb-toast>
-  }
+      <button type="button" class="btn-close ms-auto flex-shrink-0" data-bs-dismiss="toast" aria-label="Close" (click)="toastService.closeToast(toast);"></button>
+    </div>
+  </ngb-toast>
+}
diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
index 9102800f4..196ad8fda 100644
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
@@ -39,17 +39,13 @@
                 <a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn px-4 btn-dark border-dark-subtle"
                   [ngbPopover]="previewContent" [popoverTitle]="doc.title | documentTitle"
                   autoClose="true" popoverClass="shadow popover-preview" container="body" (mouseenter)="mouseEnterPreviewButton(doc)" (mouseleave)="mouseLeavePreviewButton()" #popover="ngbPopover">
-                  <svg class="buttonicon-xs" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#eye"/>
-                  </svg>
+                  <i-bs class="buttonicon-xs" name="eye"></i-bs>
                 </a>
                 <ng-template #previewContent>
                   <pngx-preview-popup [document]="doc" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()"></pngx-preview-popup>
                 </ng-template>
                 <a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
-                  <svg class="buttonicon-xs" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#download"/>
-                  </svg>
+                  <i-bs class="buttonicon-xs" name="download"></i-bs>
                 </a>
               </div>
             </td>
diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
index f178c2d9f..fe6642aa9 100644
--- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
@@ -14,10 +14,7 @@
           @if (getStatusCompleted().length > 0) {
             <a class="btn-link" (click)="dismissCompleted()" [routerLink]="[]" >
               <span class="me-1" i18n="This button dismisses all status messages about processed documents on the dashboard (failed and successful)">Dismiss completed</span>
-              <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="currentColor" class="bi bi-check2-all" viewBox="0 0 16 16">
-                <path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7l-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z"/>
-                <path d="M5.354 7.146l.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708z"/>
-              </svg>
+              <i-bs name="check2-all"></i-bs>
             </a>
           }
         </div>
@@ -64,9 +61,7 @@
               @if (status.documentId) {
                 <button class="btn btn-sm btn-outline-primary btn-open" routerLink="/documents/{{status.documentId}}" (click)="dismiss(status)">
                   <small i18n>Open document</small>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
-                  </svg>
+                  <i-bs name="arrow-right-short"></i-bs>
                 </button>
               }
             </div>
diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
index ddf412566..41eb0d1a0 100644
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
@@ -4,9 +4,7 @@
       <div class="d-flex">
         @if (draggable) {
           <div class="ms-n2 me-1" cdkDragHandle>
-            <svg class="sidebaricon text-muted" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#grip-vertical"/>
-            </svg>
+            <i-bs class="sidebaricon text-muted" name="grip-vertical"></i-bs>
           </div>
         }
         <h6 class="card-title mb-0">{{title}}</h6>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index eaf7d298a..f494d09ec 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -19,16 +19,12 @@
   }
 
   <button type="button" class="btn btn-sm btn-outline-danger me-4" (click)="delete()" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
-    <svg class="buttonicon" fill="currentColor">
-      <use xlink:href="assets/bootstrap-icons.svg#trash" />
-    </svg><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
+    <i-bs class="buttonicon" name="trash"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
   </button>
 
   <div class="btn-group me-2">
     <a [href]="downloadUrl" class="btn btn-sm btn-outline-primary">
-      <svg class="buttonicon me-md-1" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#download" />
-      </svg><span class="d-none d-lg-inline ps-1" i18n>Download</span>
+      <i-bs class="buttonicon me-md-1" name="download"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Download</span>
     </a>
 
     @if (metadata?.has_archive_version) {
@@ -43,22 +39,16 @@
 
   <div class="ms-auto" ngbDropdown>
     <button class="btn btn-sm btn-outline-primary me-2" id="actionsDropdown" ngbDropdownToggle>
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#three-dots" />
-      </svg>
+      <i-bs class="toolbaricon" name="three-dots"></i-bs>
       <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
       <button ngbDropdownItem (click)="redoOcr()" [disabled]="!userCanEdit">
-        <svg class="buttonicon-sm" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#arrow-counterclockwise" />
-        </svg><span class="ps-1" i18n>Redo OCR</span>
+        <i-bs class="buttonicon-sm" name="arrow-counterclockwise"></i-bs><span class="ps-1" i18n>Redo OCR</span>
       </button>
 
       <button ngbDropdownItem (click)="moreLike()">
-        <svg class="buttonicon-sm" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#diagram-3" />
-        </svg><span class="ps-1" i18n>More like this</span>
+        <i-bs class="buttonicon-sm" name="diagram-3"></i-bs><span class="ps-1" i18n>More like this</span>
       </button>
     </div>
   </div>
@@ -84,19 +74,13 @@
       <div class="btn-toolbar mb-1 pb-3 border-bottom">
         <div class="btn-group">
           <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Close" (click)="close()">
-            <svg class="buttonicon" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#x" />
-            </svg>
+            <i-bs class="buttonicon" name="x"></i-bs>
           </button>
           <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()">
-            <svg class="buttonicon" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#arrow-left" />
-            </svg>
+            <i-bs class="buttonicon" name="arrow-left"></i-bs>
           </button>
           <button type="button" class="btn btn-sm btn-outline-secondary"  i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()">
-            <svg class="buttonicon" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
-            </svg>
+            <i-bs class="buttonicon" name="arrow-right"></i-bs>
           </button>
         </div>
 
diff --git a/src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.html b/src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.html
index 17a31f0cf..634444ccc 100644
--- a/src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.html
+++ b/src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.html
@@ -2,14 +2,10 @@
   <button type="button" class="btn btn-outline-secondary btn-sm me-2"
     (click)="expand = !expand">
     @if (!expand) {
-      <svg class="buttonicon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#caret-down" />
-      </svg>
+      <i-bs class="buttonicon" name="caret-down"></i-bs>
     }
     @if (expand) {
-      <svg class="buttonicon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#caret-up" />
-      </svg>
+      <i-bs class="buttonicon" name="caret-up"></i-bs>
     }
   </button>
   {{title}}
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 49920c0b5..79ff6af07 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -1,23 +1,17 @@
 <div class="d-flex flex-wrap gap-4">
   <div class="d-flex align-items-center" role="group" aria-label="Select">
     <button class="btn btn-sm btn-outline-secondary" (click)="list.selectNone()">
-      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
-        </svg>&nbsp;<ng-container i18n>Cancel</ng-container>
+      <i-bs name="slash-circle"></i-bs>&nbsp;<ng-container i18n>Cancel</ng-container>
       </button>
     </div>
     <div class="d-flex align-items-center gap-2" role="group" aria-label="Select">
       <label class="me-2" i18n>Select:</label>
       <div class="btn-group">
         <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
-          <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
-            </svg>&nbsp;<ng-container i18n>Page</ng-container>
+          <i-bs name="file-earmark-check"></i-bs>&nbsp;<ng-container i18n>Page</ng-container>
           </button>
           <button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
-            <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#check-all" />
-              </svg>&nbsp;<ng-container i18n>All</ng-container>
+            <i-bs name="check-all"></i-bs>&nbsp;<ng-container i18n>All</ng-container>
             </button>
           </div>
         </div>
@@ -73,16 +67,12 @@
           <div class="btn-toolbar">
 
             <button type="button" class="btn btn-sm btn-outline-primary me-2" (click)="setPermissions()" [disabled]="!userOwnsAll || !userCanEditAll">
-              <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#person-fill-lock" />
-                </svg><div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Permissions</ng-container></div>
+              <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Permissions</ng-container></div>
               </button>
 
               <div ngbDropdown>
                 <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
-                  <svg class="toolbaricon" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#three-dots" />
-                  </svg>
+                  <i-bs class="toolbaricon" name="three-dots"></i-bs>
                   <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
                 </button>
                 <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
@@ -94,9 +84,7 @@
             <div class="btn-group btn-group-sm">
               <button class="btn btn-sm btn-outline-primary" [disabled]="awaitingDownload" (click)="downloadSelected()">
                 @if (!awaitingDownload) {
-                  <svg class="toolbaricon" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#arrow-down" />
-                  </svg>
+                  <i-bs class="toolbaricon" name="arrow-down"></i-bs>
                 }
                 @if (awaitingDownload) {
                   <div class="spinner-border spinner-border-sm" role="status">
@@ -137,9 +125,7 @@
 
             <div class="btn-group btn-group-sm">
               <button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }" [disabled]="!userOwnsAll">
-                <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                  </svg>&nbsp;<ng-container i18n>Delete</ng-container>
+                <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
                 </button>
               </div>
             </div>
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index ea2327cdd..3062c8617 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -36,9 +36,7 @@
           }
           @for (highlight of searchNoteHighlights; track highlight) {
             <span class="d-block">
-              <svg width="1em" height="1em" fill="currentColor" class="me-2">
-                <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
-              </svg>
+              <i-bs name="chat-left-text"></i-bs>
               <span [innerHtml]="highlight"></span>
             </span>
           }
@@ -51,29 +49,21 @@
         <div class="d-flex flex-column flex-md-row align-items-md-center">
           <div class="btn-group">
             <a class="btn btn-sm btn-outline-secondary" (click)="clickMoreLike.emit()">
-              <svg class="sidebaricon" fill="currentColor" class="sidebaricon">
-                <use xlink:href="assets/bootstrap-icons.svg#diagram-3"/>
-                </svg>&nbsp;<span class="d-none d-md-inline" i18n>More like this</span>
+              <i-bs class="sidebaricon" fill="currentColor" class="sidebaricon" name="diagram-3"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>More like this</span>
               </a>
               <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
-                <svg class="sidebaricon" fill="currentColor" class="sidebaricon">
-                  <use xlink:href="assets/bootstrap-icons.svg#pencil"/>
-                  </svg>&nbsp;<span class="d-none d-md-inline" i18n>Edit</span>
+                <i-bs class="sidebaricon" fill="currentColor" class="sidebaricon" name="pencil"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Edit</span>
                 </a>
                 <a class="btn btn-sm btn-outline-secondary" target="_blank" [href]="previewUrl"
                   [ngbPopover]="previewContent" [popoverTitle]="document.title | documentTitle"
                   autoClose="true" popoverClass="shadow popover-preview" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
-                  <svg class="sidebaricon" fill="currentColor" class="sidebaricon">
-                    <use xlink:href="assets/bootstrap-icons.svg#eye"/>
-                    </svg>&nbsp;<span class="d-none d-md-inline" i18n>View</span>
+                  <i-bs class="sidebaricon" fill="currentColor" class="sidebaricon" name="eye"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>View</span>
                   </a>
                   <ng-template #previewContent>
                     <pngx-preview-popup [document]="document"></pngx-preview-popup>
                   </ng-template>
                   <a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
-                    <svg class="sidebaricon" fill="currentColor" class="sidebaricon">
-                      <use xlink:href="assets/bootstrap-icons.svg#download"/>
-                      </svg>&nbsp;<span class="d-none d-md-inline" i18n>Download</span>
+                    <i-bs class="sidebaricon" fill="currentColor" class="sidebaricon" name="download"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Download</span>
                     </a>
                   </div>
 
@@ -81,35 +71,27 @@
                   <div class="list-group list-group-horizontal border-0 card-info ms-md-auto mt-2 mt-md-0">
                     @if (notesEnabled && document.notes.length) {
                       <button routerLink="/documents/{{document.id}}/notes" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="View notes" i18n-title>
-                        <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-                          <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
-                        </svg>
+                        <i-bs class="metadata-icon me-2 text-muted" name="chat-left-text"></i-bs>
                         <small i18n>{{document.notes.length}} Notes</small>
                       </button>
                     }
                     @if (document.document_type) {
                       <button type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="Filter by document type" i18n-title
                         (click)="clickDocumentType.emit(document.document_type);$event.stopPropagation()">
-                        <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-                          <use xlink:href="assets/bootstrap-icons.svg#file-earmark"/>
-                        </svg>
+                        <i-bs class="metadata-icon me-2 text-muted" name="file-earmark"></i-bs>
                         <small>{{(document.document_type$ | async)?.name}}</small>
                       </button>
                     }
                     @if (document.storage_path) {
                       <button type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="Filter by storage path" i18n-title
                         (click)="clickStoragePath.emit(document.storage_path);$event.stopPropagation()">
-                        <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-                          <use xlink:href="assets/bootstrap-icons.svg#archive"/>
-                        </svg>
+                        <i-bs class="metadata-icon me-2 text-muted" name="archive"></i-bs>
                         <small>{{(document.storage_path$ | async)?.name}}</small>
                       </button>
                     }
                     @if (document.archive_serial_number | isNumber) {
                       <div class="list-group-item me-2 bg-light text-dark p-1 border-0">
-                        <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-                          <use xlink:href="assets/bootstrap-icons.svg#upc-scan"/>
-                        </svg>
+                        <i-bs class="metadata-icon me-2 text-muted" name="upc-scan"></i-bs>
                         <small>#{{document.archive_serial_number}}</small>
                       </div>
                     }
@@ -121,24 +103,18 @@
                       </div>
                     </ng-template>
                     <div class="list-group-item bg-light text-dark p-1 border-0" [ngbTooltip]="dateTooltip">
-                      <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#calendar-event"/>
-                      </svg>
+                      <i-bs class="metadata-icon me-2 text-muted" name="calendar-event"></i-bs>
                       <small>{{document.created_date | customDate:'mediumDate'}}</small>
                     </div>
                     @if (document.owner && document.owner !== settingsService.currentUser.id) {
                       <div class="list-group-item bg-light text-dark p-1 border-0">
-                        <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-                          <use xlink:href="assets/bootstrap-icons.svg#person-fill-lock"/>
-                        </svg>
+                        <i-bs class="metadata-icon me-2 text-muted" name="person-fill-lock"></i-bs>
                         <small>{{document.owner | username}}</small>
                       </div>
                     }
                     @if (document.is_shared_by_requester) {
                       <div class="list-group-item bg-light text-dark p-1 border-0">
-                        <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-                          <use xlink:href="assets/bootstrap-icons.svg#people-fill"/>
-                        </svg>
+                        <i-bs class="metadata-icon me-2 text-muted" name="people-fill"></i-bs>
                         <small i18n>Shared</small>
                       </div>
                     }
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 15290f672..9864af55a 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -25,9 +25,7 @@
     @if (notesEnabled && document.notes.length) {
       <a routerLink="/documents/{{document.id}}/notes" class="document-card-notes py-2 px-1">
         <span class="badge rounded-pill bg-light border text-primary">
-          <svg class="metadata-icon ms-1 me-1" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
-          </svg>
+          <i-bs class="metadata-icon ms-1 me-1" name="chat-left-text"></i-bs>
         {{document.notes.length}}</span>
       </a>
     }
@@ -45,18 +43,14 @@
         @if (document.document_type) {
           <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Toggle document type filter" i18n-title
             (click)="clickDocumentType.emit(document.document_type);$event.stopPropagation()">
-            <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#file-earmark"/>
-            </svg>
+            <i-bs class="metadata-icon me-2 text-muted" name="file-earmark"></i-bs>
             <small>{{(document.document_type$ | async)?.name ?? privateName}}</small>
           </button>
         }
         @if (document.storage_path) {
           <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Toggle storage path filter" i18n-title
             (click)="clickStoragePath.emit(document.storage_path);$event.stopPropagation()">
-            <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#folder"/>
-            </svg>
+            <i-bs class="metadata-icon me-2 text-muted" name="folder"></i-bs>
             <small>{{(document.storage_path$ | async)?.name ?? privateName}}</small>
           </button>
         }
@@ -69,33 +63,25 @@
             </div>
           </ng-template>
           <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateTooltip">
-            <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#calendar-event"/>
-            </svg>
+            <i-bs class="metadata-icon me-2 text-muted" name="calendar-event"></i-bs>
             <small>{{document.created_date | customDate:'mediumDate'}}</small>
           </div>
         </div>
         @if (document.archive_serial_number | isNumber) {
           <div class="ps-0 p-1">
-            <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#upc-scan"/>
-            </svg>
+            <i-bs class="metadata-icon me-2 text-muted" name="upc-scan"></i-bs>
             <small>#{{document.archive_serial_number}}</small>
           </div>
         }
         @if (document.owner && document.owner !== settingsService.currentUser.id) {
           <div class="ps-0 p-1">
-            <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#person-fill-lock"/>
-            </svg>
+            <i-bs class="metadata-icon me-2 text-muted" name="person-fill-lock"></i-bs>
             <small>{{document.owner | username}}</small>
           </div>
         }
         @if (document.is_shared_by_requester) {
           <div class="ps-0 p-1">
-            <svg class="metadata-icon me-2 text-muted" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#people-fill"/>
-            </svg>
+            <i-bs class="metadata-icon me-2 text-muted" name="people-fill"></i-bs>
             <small i18n>Shared</small>
           </div>
         }
@@ -103,26 +89,18 @@
       <div class="d-flex justify-content-between align-items-center">
         <div class="btn-group w-100">
           <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Edit" i18n-title *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }" i18n-title>
-            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
-            </svg>
+            <i-bs name="pencil"></i-bs>
           </a>
           <a [href]="previewUrl" target="_blank" class="btn btn-sm btn-outline-secondary"
             [ngbPopover]="previewContent" [popoverTitle]="document.title | documentTitle"
             autoClose="true" popoverClass="shadow popover-preview" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
-              <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
-              <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
-            </svg>
+            <i-bs name="eye"></i-bs>
           </a>
           <ng-template #previewContent>
             <pngx-preview-popup [document]="document"></pngx-preview-popup>
           </ng-template>
           <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" i18n-title (click)="$event.stopPropagation()">
-            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
-              <path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
-            </svg>
+            <i-bs name="download"></i-bs>
           </a>
         </div>
       </div>
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 64cac2d90..6b1d6481b 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -2,9 +2,7 @@
 
   <div ngbDropdown class="me-2 d-flex">
     <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#text-indent-left" />
-      </svg>
+      <i-bs class="toolbaricon" name="text-indent-left"></i-bs>
       <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Select</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
@@ -16,21 +14,15 @@
   <div class="btn-group flex-fill" role="group">
     <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="details" (ngModelChange)="saveDisplayMode()" id="displayModeDetails" name="displayModeDetails">
     <label for="displayModeDetails" class="btn btn-outline-primary btn-sm">
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#list-ul" />
-      </svg>
+      <i-bs class="toolbaricon" name="list-ul"></i-bs>
     </label>
     <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="smallCards" (ngModelChange)="saveDisplayMode()" id="displayModeSmall" name="displayModeSmall">
     <label for="displayModeSmall" class="btn btn-outline-primary btn-sm">
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#grid" />
-      </svg>
+      <i-bs class="toolbaricon" name="grid"></i-bs>
     </label>
     <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="largeCards" (ngModelChange)="saveDisplayMode()" id="displayModeLarge" name="displayModeLarge">
     <label for="displayModeLarge" class="btn btn-outline-primary btn-sm">
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#hdd-stack" />
-      </svg>
+      <i-bs class="toolbaricon" name="hdd-stack"></i-bs>
     </label>
   </div>
 
@@ -40,15 +32,11 @@
       <div class="w-100 d-flex pb-2 mb-1 border-bottom">
         <input type="radio" class="btn-check" [value]="false" [(ngModel)]="listSortReverse" id="listSortReverseFalse">
         <label class="btn btn-outline-primary btn-sm mx-2 flex-fill" for="listSortReverseFalse">
-          <svg class="toolbaricon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
-          </svg>
+          <i-bs class="toolbaricon" name="sort-alpha-down"></i-bs>
         </label>
         <input type="radio" class="btn-check" [value]="true" [(ngModel)]="listSortReverse" id="listSortReverseTrue">
         <label class="btn btn-outline-primary btn-sm me-2 flex-fill" for="listSortReverseTrue">
-          <svg class="toolbaricon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
-          </svg>
+          <i-bs class="toolbaricon" name="sort-alpha-up-alt"></i-bs>
         </label>
       </div>
       <div>
@@ -116,9 +104,7 @@
       }
       @if (!list.isReloading && isFiltered) {
         <button class="btn btn-link py-0" (click)="resetFilters()">
-          <svg fill="currentColor" class="buttonicon-sm">
-            <use xlink:href="assets/bootstrap-icons.svg#x"/>
-            </svg><small i18n>Reset filters</small>
+          <i-bs class="buttonicon-sm" name="x"></i-bs><small i18n>Reset filters</small>
           </button>
         }
       </div>
@@ -246,9 +232,7 @@
                   @if (d.notes.length) {
                     <a routerLink="/documents/{{d.id}}/notes" class="btn btn-sm p-0">
                       <span class="badge rounded-pill bg-light border text-primary">
-                        <svg class="metadata-icon ms-1 me-1" fill="currentColor">
-                          <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
-                        </svg>
+                        <i-bs class="metadata-icon ms-1 me-1" name="chat-left-text"></i-bs>
                       {{d.notes.length}}</span>
                     </a>
                   }
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index 6fec313f8..8350f2264 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -19,9 +19,7 @@
         }
         @if (_textFilter) {
           <button class="btn btn-link btn-sm px-0 position-absolute top-0 end-0 z-10" (click)="resetTextField()">
-            <svg fill="currentColor" class="buttonicon-sm me-1">
-              <use xlink:href="assets/bootstrap-icons.svg#x"/>
-            </svg>
+            <i-bs class="buttonicon-sm me-1" name="x"></i-bs>
           </button>
         }
         <input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup)="textFilterKeyup($event)" [readonly]="textFilterTarget === 'fulltext-morelike'">
@@ -87,9 +85,7 @@
       </div>
       <div class="d-flex flex-wrap d-none d-sm-inline-block">
         <button class="btn btn-outline-secondary btn-sm" [disabled]="!rulesModified" (click)="resetSelected()">
-          <svg class="toolbaricon ms-n1" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#x"></use>
-            </svg><ng-container i18n>Reset filters</ng-container>
+          <i-bs class="toolbaricon ms-n1" name="x"></i-bs><ng-container i18n>Reset filters</ng-container>
           </button>
         </div>
       </div>
diff --git a/src-ui/src/app/components/document-notes/document-notes.component.html b/src-ui/src/app/components/document-notes/document-notes.component.html
index b759e6b66..cf52b39b3 100644
--- a/src-ui/src/app/components/document-notes/document-notes.component.html
+++ b/src-ui/src/app/components/document-notes/document-notes.component.html
@@ -23,9 +23,7 @@
           <div class="d-flex card-footer small bg-light text-primary justify-content-between align-items-center">
             <span>{{displayName(note)}} - {{ note.created | customDate}}</span>
             <button type="button" class="btn btn-link btn-sm p-0 fade" title="Delete note" i18n-title (click)="deleteNote(note.id)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Note }">
-              <svg width="13" height="13" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#trash" />
-              </svg>
+              <i-bs name="trash"></i-bs>
               <span class="visually-hidden" i18n>Delete note</span>
             </button>
           </div>
diff --git a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
index dc6628a6a..a3db14169 100644
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
+++ b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
@@ -1,8 +1,6 @@
 <pngx-page-header title="Custom Fields" i18n-title>
   <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editField()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.CustomField }">
-    <svg class="sidebaricon me-1" fill="currentColor">
-      <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-    </svg>
+    <i-bs class="sidebaricon me-1" name="plus-circle"></i-bs>
     <ng-container i18n>Add Field</ng-container>
   </button>
 </pngx-page-header>
@@ -25,14 +23,10 @@
         <div class="col">
           <div class="btn-group">
             <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editField(field)">
-              <svg class="buttonicon-sm" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-                </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+              <i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
               </button>
               <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteField(field)">
-                <svg class="buttonicon-sm" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                  </svg>&nbsp;<ng-container i18n>Delete</ng-container>
+                <i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
                 </button>
               </div>
             </div>
diff --git a/src-ui/src/app/components/manage/mail/mail.component.html b/src-ui/src/app/components/manage/mail/mail.component.html
index b3c93d794..14728c1fc 100644
--- a/src-ui/src/app/components/manage/mail/mail.component.html
+++ b/src-ui/src/app/components/manage/mail/mail.component.html
@@ -5,9 +5,7 @@
   <h4>
     <ng-container i18n>Mail accounts</ng-container>
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailAccount()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
-      <svg class="sidebaricon me-1" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-      </svg>
+      <i-bs class="sidebaricon me-1" name="plus-circle"></i-bs>
       <ng-container i18n>Add Account</ng-container>
     </button>
   </h4>
@@ -28,19 +26,13 @@
           <div class="col">
             <div class="btn-group">
               <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userCanEdit(account)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailAccount(account)">
-                <svg class="buttonicon-sm" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-                  </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+                <i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
                 </button>
                 <button *pngxIfOwner="account" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(account)">
-                  <svg class="buttonicon-sm" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#person-lock" />
-                    </svg>&nbsp;<ng-container i18n>Permissions</ng-container>
+                  <i-bs class="buttonicon-sm" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
                   </button>
                   <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)">
-                    <svg class="buttonicon-sm" fill="currentColor">
-                      <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                      </svg>&nbsp;<ng-container i18n>Delete</ng-container>
+                    <i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
                     </button>
                   </div>
                 </div>
@@ -58,9 +50,7 @@
         <h4 class="mt-4">
           <ng-container i18n>Mail rules</ng-container>
           <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailRule()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
-            <svg class="sidebaricon me-1" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-            </svg>
+            <i-bs class="sidebaricon me-1" name="plus-circle"></i-bs>
             <ng-container i18n>Add Rule</ng-container>
           </button>
         </h4>
@@ -81,19 +71,13 @@
                 <div class="col">
                   <div class="btn-group">
                     <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" [disabled]="!userCanEdit(rule)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailRule(rule)">
-                      <svg class="buttonicon-sm" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-                        </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+                      <i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
                       </button>
                       <button *pngxIfOwner="rule" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(rule)">
-                        <svg class="buttonicon-sm" fill="currentColor">
-                          <use xlink:href="assets/bootstrap-icons.svg#person-lock" />
-                          </svg>&nbsp;<ng-container i18n>Permissions</ng-container>
+                        <i-bs class="buttonicon-sm" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
                         </button>
                         <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }" [disabled]="!userIsOwner(rule)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)">
-                          <svg class="buttonicon-sm" fill="currentColor">
-                            <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                            </svg>&nbsp;<ng-container i18n>Delete</ng-container>
+                          <i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
                           </button>
                         </div>
                       </div>
diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.html b/src-ui/src/app/components/manage/management-list/management-list.component.html
index ca9ec4750..9f597d6ac 100644
--- a/src-ui/src/app/components/manage/management-list/management-list.component.html
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.html
@@ -1,18 +1,12 @@
 <pngx-page-header title="{{ typeNamePlural | titlecase }}">
   <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedObjects.size === 0">
-    <svg class="sidebaricon" fill="currentColor">
-      <use xlink:href="assets/bootstrap-icons.svg#x"/>
-      </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
+    <i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
     </button>
     <button type="button" class="btn btn-sm btn-outline-primary me-5" (click)="setPermissions()" [disabled]="!userOwnsAll || selectedObjects.size === 0">
-      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#person-fill-lock" />
-        </svg>&nbsp;<ng-container i18n>Permissions</ng-container>
+      <i-bs name="person-fill-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
       </button>
       <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()" *pngxIfPermissions="{ action: PermissionAction.Add, type: permissionType }" i18n>
-    <svg class="sidebaricon me-1" fill="currentColor">
-      <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-    </svg>
+    <i-bs class="sidebaricon me-1" name="plus-circle"></i-bs>
     Create
   </button>
     </pngx-page-header>
@@ -80,9 +74,7 @@
                 <div class="btn-group d-block d-sm-none">
                   <div ngbDropdown class="d-inline-block">
                     <button type="button" class="btn btn-link" id="actionsMenuMobile" ngbDropdownToggle>
-                      <svg class="toolbaricon" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#three-dots-vertical" />
-                      </svg>
+                      <i-bs class="toolbaricon" name="three-dots-vertical"></i-bs>
                     </button>
                     <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
                       <button (click)="filterDocuments(object)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents</button>
@@ -93,19 +85,13 @@
                 </div>
                 <div class="btn-group d-none d-sm-block">
                   <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-                    <svg class="buttonicon-sm" fill="currentColor">
-                      <use xlink:href="assets/bootstrap-icons.svg#filter" />
-                      </svg>&nbsp;<ng-container i18n>Documents</ng-container>
+                    <i-bs class="buttonicon-sm" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container>
                     </button>
                     <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
-                      <svg class="buttonicon-sm" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-                        </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+                      <i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
                       </button>
                       <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)">
-                        <svg class="buttonicon-sm" fill="currentColor">
-                          <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                          </svg>&nbsp;<ng-container i18n>Delete</ng-container>
+                        <i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
                         </button>
                       </div>
                     </td>
diff --git a/src-ui/src/app/components/manage/workflows/workflows.component.html b/src-ui/src/app/components/manage/workflows/workflows.component.html
index f4fb3b328..04e38b3f4 100644
--- a/src-ui/src/app/components/manage/workflows/workflows.component.html
+++ b/src-ui/src/app/components/manage/workflows/workflows.component.html
@@ -1,8 +1,6 @@
 <pngx-page-header title="Workflows" i18n-title>
   <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editWorkflow()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }">
-    <svg class="sidebaricon me-1" fill="currentColor">
-      <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-    </svg>
+    <i-bs class="sidebaricon me-1" name="plus-circle"></i-bs>
     <ng-container i18n>Add Workflow</ng-container>
   </button>
 </pngx-page-header>
@@ -29,14 +27,10 @@
         <div class="col">
           <div class="btn-group">
             <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editWorkflow(workflow)">
-              <svg class="buttonicon-sm" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-                </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+              <i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
               </button>
               <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteWorkflow(workflow)">
-                <svg class="buttonicon-sm" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                  </svg>&nbsp;<ng-container i18n>Delete</ng-container>
+                <i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
                 </button>
               </div>
             </div>
diff --git a/src-ui/src/app/components/not-found/not-found.component.html b/src-ui/src/app/components/not-found/not-found.component.html
index 92ac85f39..9c8031bda 100644
--- a/src-ui/src/app/components/not-found/not-found.component.html
+++ b/src-ui/src/app/components/not-found/not-found.component.html
@@ -6,9 +6,7 @@
       <h1 class="display-6" i18n>Not Found</h1>
       <p>
         <a class="btn btn-primary" routerLink="/dashboard">
-          <svg class="buttonicon me-1" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#house" />
-          </svg>
+          <i-bs class="buttonicon me-1" name="house"></i-bs>
           <ng-container i18n>Go to Dashboard</ng-container>
         </a>
       </p>