Use ionicons web components

We were using embedded SCSS from ionicons instead of their recommended
approach which is to use web components + their npm package (though we
WERE using their npm package).

Issue #893 Move to ionicons web components

Author: slifty

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="chevron-back"></ion-icon> Back
 				</div>
 			}
 			<div class="picker-folder-name">

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>

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>

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>

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,

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">

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="chevron-back"></ion-icon> Back </a>
 	</div>
 	<div class="thumb-target">
 		<div

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,

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) {

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;