PermanentOrg · slifty · Jan 16, 2026
diff --git a/src/app/core/components/folder-picker/folder-picker.component.html b/src/app/core/components/folder-picker/folder-picker.component.html
@@ -3,7 +3,7 @@
 		<div class="picker-header">
 			@if (!isRootFolder || selectedRecord) {
 				<div class="picker-back" (click)="onBackClick()">
-					<i class="ion-md-arrow-dropleft"></i> Back
+					<ion-icon name="caret-back"></ion-icon> Back
 				</div>
 			}
 			<div class="picker-folder-name">

diff --git a/src/app/core/components/left-menu/left-menu.component.html b/src/app/core/components/left-menu/left-menu.component.html
@@ -91,7 +91,7 @@
 				[routerLink]="['/search']"
 				[class.active]="checkMenuItemActive('/search')"
 			>
-				<i class="ion-md-search"></i>
+				<ion-icon name="search"></ion-icon>
 				Search
 			</a>
 			<a
@@ -216,26 +216,26 @@
 				[routerLink]="[{ outlets: { dialog: ['invitations'] } }]"
 				[class.active]="checkMenuItemActive('/invitations')"
 			>
-				<i class="ion-md-person-add"></i>
+				<ion-icon name="person-add"></ion-icon>
 				Invitations
 			</a>
 			<a
 				class="menu-item hide-desktop"
 				[routerLink]="[{ outlets: { dialog: ['storage', 'add'] } }]"
 			>
-				<i class="ion-md-add-circle"></i>
+				<ion-icon name="add-circle"></ion-icon>
 				Add Storage
 			</a>
 			<a
 				class="menu-item hide-desktop"
 				href="https://desk.zoho.com/portal/permanent/home"
 				target="_blank"
 			>
-				<i class="ion-md-help-circle"></i>
+				<ion-icon name="help-circle"></ion-icon>
 				Help
 			</a>
 			<a class="menu-item hide-desktop" (click)="logOut()">
-				<i class="ion-md-exit"></i>
+				<ion-icon name="exit"></ion-icon>
 				Log Out
 			</a>
 		</div>

diff --git a/src/app/core/components/members-dialog/members-dialog.component.html b/src/app/core/components/members-dialog/members-dialog.component.html
@@ -41,12 +41,12 @@
 										{{ member.primaryEmail }}
 									</div>
 									<div class="member-access">
-										<i
-											class="ion-md-information-circle"
+										<ion-icon
+											name="information-circle"
 											[ngbTooltip]="
 												getTooltipForAccess(member.accessRole) | prTooltip
 											"
-										></i>
+										></ion-icon>
 										Access: {{ member.accessRole | prConstants }}
 									</div>
 								</div>
@@ -110,12 +110,12 @@
 										{{ member.primaryEmail }}
 									</div>
 									<div class="member-access">
-										<i
-											class="ion-md-information-circle"
+										<ion-icon
+											name="information-circle"
 											[ngbTooltip]="
 												getTooltipForAccess(member.accessRole) | prTooltip
 											"
-										></i>
+										></ion-icon>
 										Access: {{ member.accessRole | prConstants }}
 										<span>(pending)</span>
 									</div>

diff --git a/src/app/core/components/nav/nav.component.html b/src/app/core/components/nav/nav.component.html
@@ -57,7 +57,7 @@
 					(click)="rightMenu.createNewFolder()"
 					[disabled]="!rightMenu.allowedActions.createFolder"
 				>
-					<i class="ion-md-folder"></i>New folder
+					<ion-icon name="folder"></ion-icon>New folder
 				</button>
 			}
 		</div>

diff --git a/src/app/core/components/nav/nav.component.scss b/src/app/core/components/nav/nav.component.scss
@@ -69,7 +69,8 @@ nav.navbar {
 			justify-content: center;
 			font-weight: $font-weight-bold;
 
-			i {
+			i,
+			ion-icon {
 				margin-right: $navbar-button-icon-padding;
 			}
 		}

diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CoreRoutingModule } from '@core/core.routes';
 import { SharedModule } from '@shared/shared.module';
@@ -65,6 +65,7 @@ import { TwoFactorAuthComponent } from './components/two-factor-auth/two-factor-
 import { RedeemGiftComponent } from './components/redeem-gift/redeem-gift.component';
 
 @NgModule({
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	imports: [
 		AnnouncementModule,
 		CommonModule,

diff --git a/src/app/file-browser/components/file-list-item/file-list-item.component.html b/src/app/file-browser/components/file-list-item/file-list-item.component.html
@@ -87,11 +87,11 @@
 				{{ item.displayName }}
 			</p>
 			@if (!showAccess && item.ShareVOs?.length && !isUnlistedShare) {
-				<i
-					class="ion-md-people"
+				<ion-icon
+					name="people"
 					@ngIfFadeInAnimation
 					[ngbTooltip]="'fileList.icons.share' | prTooltip"
-				></i>
+				></ion-icon>
 			}
 		</div>
 		<div class="second-row">

diff --git a/src/app/file-browser/components/file-viewer/file-viewer.component.html b/src/app/file-browser/components/file-viewer/file-viewer.component.html
@@ -7,7 +7,7 @@
 	}"
 >
 	<div class="file-viewer-close">
-		<a (click)="close()"> <i class="ion-md-arrow-dropleft"></i> Back </a>
+		<a (click)="close()"> <ion-icon name="caret-back"></ion-icon> Back </a>
 	</div>
 	<div class="thumb-target">
 		<div

diff --git a/src/app/file-browser/file-browser-components.module.ts b/src/app/file-browser/file-browser-components.module.ts
@@ -1,4 +1,8 @@
-import { NgModule, ComponentFactoryResolver } from '@angular/core';
+import {
+	NgModule,
+	ComponentFactoryResolver,
+	CUSTOM_ELEMENTS_SCHEMA,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { GoogleMapsModule } from '@angular/google-maps';
@@ -29,6 +33,7 @@ import { SharingDialogComponent } from './components/sharing-dialog/sharing-dial
 import { DownloadButtonComponent } from './components/download-button/download-button.component';
 
 @NgModule({
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	imports: [
 		CommonModule,
 		RouterModule,

diff --git a/src/app/search/components/global-search-bar/global-search-bar.component.html b/src/app/search/components/global-search-bar/global-search-bar.component.html
@@ -9,7 +9,7 @@
 	(focus)="onInputFocus()"
 	(keydown)="onInputKeydown($event)"
 />
-<i class="ion-md-search"></i>
+<ion-icon name="search"></ion-icon>
 @if (showResults) {
 	<div class="search-results">
 		@if (tagResults?.length) {

diff --git a/src/app/search/components/global-search-bar/global-search-bar.component.scss b/src/app/search/components/global-search-bar/global-search-bar.component.scss
@@ -57,7 +57,7 @@ input {
 	}
 }
 
-i.ion-md-search {
+ion-icon[name='search'] {
 	position: absolute;
 	left: $input-padding;
 	opacity: 0.5;

diff --git a/src/app/search/components/global-search-results/global-search-results.component.html b/src/app/search/components/global-search-results/global-search-results.component.html
@@ -6,7 +6,7 @@
 		#searchInput
 		[formControl]="formControl"
 	/>
-	<i class="ion-md-search"></i>
+	<ion-icon name="search"></ion-icon>
 	@if (waiting) {
 		<div class="fade-ring-loader" @ngIfFadeInAnimation></div>
 	}
@@ -54,13 +54,13 @@
 							}
 							@if (item.isFolder) {
 								<div class="item-thumb">
-									<i class="ion-md-folder"></i>
+									<ion-icon name="folder"></ion-icon>
 								</div>
 							}
 							<div class="item-info">
 								<div class="item-name">{{ item.displayName }}</div>
 								<div class="item-parent-folder">
-									<i class="ion-md-folder"></i>
+									<ion-icon name="folder"></ion-icon>
 									{{ item.parentDisplayName }}
 								</div>
 							</div>

diff --git a/src/app/search/components/global-search-results/global-search-results.component.scss b/src/app/search/components/global-search-results/global-search-results.component.scss
@@ -42,7 +42,7 @@ input {
 	max-width: 30rem;
 }
 
-i.ion-md-search {
+ion-icon[name='search'] {
 	position: absolute;
 	left: $input-padding;
 	opacity: 0.5;

diff --git a/src/app/search/search.module.ts b/src/app/search/search.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
 import { FormsModule } from '@angular/forms';
@@ -7,6 +7,7 @@ import { GlobalSearchBarComponent } from './components/global-search-bar/global-
 import { GlobalSearchResultsComponent } from './components/global-search-results/global-search-results.component';
 
 @NgModule({
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	declarations: [GlobalSearchBarComponent, GlobalSearchResultsComponent],
 	imports: [CommonModule, SharedModule, FormsModule],
 	providers: [SearchService],

diff --git a/src/app/shared/components/breadcrumbs/breadcrumb.component.html b/src/app/shared/components/breadcrumbs/breadcrumb.component.html
@@ -7,7 +7,7 @@
 }
 @if (!last) {
 	<span class="separator">
-		<i class="ion-md-arrow-dropright"></i>
+		<ion-icon name="caret-forward"></ion-icon>
 	</span>
 }
 @if (last) {

diff --git a/src/app/shared/components/breadcrumbs/breadcrumbs.component.html b/src/app/shared/components/breadcrumbs/breadcrumbs.component.html
@@ -20,11 +20,11 @@
 	}
 	@if (currentFolder?.ShareVOs?.length) {
 		<div class="breadcrumb-shares">
-			<i
-				class="ion-md-people"
+			<ion-icon
+				name="people"
 				(click)="onShareIconClick()"
 				[ngbTooltip]="sharesList"
-			></i>
+			></ion-icon>
 			<ng-template #sharesList>
 				<ng-container [ngPlural]="currentFolder?.ShareVOs?.length">
 					Shared with

diff --git a/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss b/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss
@@ -44,6 +44,10 @@ pr-breadcrumb {
 		display: inline-block;
 		padding: 0px 0.5rem;
 		// opacity: 0.5;
+
+		ion-icon {
+			font-size: 0.6em;
+		}
 	}
 
 	&.drop-target,

diff --git a/src/app/shared/components/thumbnail/thumbnail.component.html b/src/app/shared/components/thumbnail/thumbnail.component.html
@@ -7,7 +7,7 @@
 	[hidden]="item?.isFolder || isZip"
 ></div>
 <div class="pr-thumbnail-icon" [hidden]="!item?.isFolder">
-	<i class="ion-md-folder"></i>
+	<ion-icon name="folder"></ion-icon>
 </div>
 <div class="pr-thumbnail-icon zip-icon" [hidden]="!isZip">
 	<fa-icon [icon]="['fas', 'file-archive']"></fa-icon>

diff --git a/src/app/shared/components/thumbnail/thumbnail.component.spec.ts b/src/app/shared/components/thumbnail/thumbnail.component.spec.ts
@@ -243,7 +243,7 @@ describe('ThumbnailComponent', () => {
 			'.pr-thumbnail-image[hidden]',
 		);
 		const folderIcons = fixture.nativeElement.querySelectorAll(
-			'i.ion-md-folder:not([hidden])',
+			'ion-icon[name="folder"]:not([hidden])',
 		);
 
 		expect(hiddenImages.length).toBe(1);

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -1,4 +1,8 @@
-import { NgModule, ComponentFactoryResolver } from '@angular/core';
+import {
+	NgModule,
+	ComponentFactoryResolver,
+	CUSTOM_ELEMENTS_SCHEMA,
+} from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormInputComponent } from '@shared/components/form-input/form-input.component';
@@ -72,6 +76,7 @@ import { GetFileTypePipe } from './pipes/get-file-type.pipe';
 import { ArchiveSwitcherComponent } from './components/archive-switcher/archive-switcher.component';
 
 @NgModule({
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	imports: [
 		CommonModule,
 		FormsModule,

diff --git a/...p/views/components/timeline-view/timeline-breadcrumbs/timeline-breadcrumbs.component.html b/...p/views/components/timeline-view/timeline-breadcrumbs/timeline-breadcrumbs.component.html
@@ -8,7 +8,7 @@
 			}
 			@if (!last) {
 				<span class="separator">
-					<i class="ion-md-arrow-dropright"></i>
+					<ion-icon name="caret-forward"></ion-icon>
 				</span>
 			}
 			@if (last) {

diff --git a/...p/views/components/timeline-view/timeline-breadcrumbs/timeline-breadcrumbs.component.scss b/...p/views/components/timeline-view/timeline-breadcrumbs/timeline-breadcrumbs.component.scss
@@ -31,5 +31,9 @@
 		display: inline-block;
 		padding: 0px 6px 0px 4px;
 		opacity: 0.5;
+
+		ion-icon {
+			font-size: 0.6em;
+		}
 	}
 }
diff --git a/src/app/views/views-components.module.ts b/src/app/views/views-components.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
@@ -8,6 +8,7 @@ import { TimelineViewComponent } from './components/timeline-view/timeline-view.
 import { TimelineBreadcrumbsComponent } from './components/timeline-view/timeline-breadcrumbs/timeline-breadcrumbs.component';
 
 @NgModule({
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	imports: [CommonModule, RouterModule, SharedModule],
 	exports: [TimelineViewComponent],
 	declarations: [TimelineViewComponent, TimelineBreadcrumbsComponent],

diff --git a/src/assets/fonts/ionicons.eot b/src/assets/fonts/ionicons.eot