diff --git a/angular.json b/angular.json
index c084694891..2f4e7c41f9 100644
--- a/angular.json
+++ b/angular.json
@@ -430,7 +430,10 @@
             "tsConfig": "lib/core/tsconfig.spec.json",
             "karmaConfig": "lib/core/karma.conf.js",
             "codeCoverage": true,
-            "sourceMap": true
+            "sourceMap": true,
+            "styles": [
+              "demo-shell/src/assets/fonts/material-icons/material-icons.css"
+            ]
           }
         },
         "lint": {
diff --git a/lib/core/info-drawer/info-drawer.component.spec.ts b/lib/core/info-drawer/info-drawer.component.spec.ts
index 5dbd2c0b3d..c33f51519c 100644
--- a/lib/core/info-drawer/info-drawer.component.spec.ts
+++ b/lib/core/info-drawer/info-drawer.component.spec.ts
@@ -136,7 +136,7 @@ describe('Custom InfoDrawer', () => {
         fixture.detectChanges();
         const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
         expect(tab[0].nativeElement.innerText).not.toBe('Tab3');
-        expect(tab[0].nativeElement.innerText).toContain('TAB-ICON');
+        expect(tab[0].nativeElement.innerText).toContain('tab-icon');
     });
 });
 
diff --git a/lib/core/viewer/components/viewer.component.spec.ts b/lib/core/viewer/components/viewer.component.spec.ts
index a82d7202d7..375ce7b822 100644
--- a/lib/core/viewer/components/viewer.component.spec.ts
+++ b/lib/core/viewer/components/viewer.component.spec.ts
@@ -34,6 +34,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UploadService } from '../../services/upload.service';
 import { FileModel } from '../../models';
 import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
     selector: 'adf-viewer-container-toolbar',
@@ -144,7 +146,9 @@ describe('ViewerComponent', () => {
         imports: [
             NoopAnimationsModule,
             TranslateModule.forRoot(),
-            CoreTestingModule
+            CoreTestingModule,
+            MatButtonModule,
+            MatIconModule
         ],
         declarations: [
             ViewerWithCustomToolbarComponent,
@@ -698,6 +702,103 @@ describe('ViewerComponent', () => {
 
         describe('Toolbar', () => {
 
+            it('should show only next file button', async () => {
+                component.allowNavigate = true;
+                component.canNavigateBefore = false;
+                component.canNavigateNext = true;
+
+                fixture.detectChanges();
+                await fixture.whenStable();
+
+                const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+                expect(nextButton).not.toBeNull();
+
+                const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+                expect(prevButton).toBeNull();
+            });
+
+            it('should provide tooltip for next file button', async () => {
+                component.allowNavigate = true;
+                component.canNavigateBefore = false;
+                component.canNavigateNext = true;
+
+                fixture.detectChanges();
+                await fixture.whenStable();
+
+                const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+                expect(nextButton.title).toBe('ADF_VIEWER.ACTIONS.NEXT_FILE');
+            });
+
+            it('should show only previous file button', async () => {
+                component.allowNavigate = true;
+                component.canNavigateBefore = true;
+                component.canNavigateNext = false;
+
+                fixture.detectChanges();
+                await fixture.whenStable();
+
+                const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+                expect(nextButton).toBeNull();
+
+                const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+                expect(prevButton).not.toBeNull();
+            });
+
+            it('should provide tooltip for the previous file button', async () => {
+                component.allowNavigate = true;
+                component.canNavigateBefore = true;
+                component.canNavigateNext = false;
+
+                fixture.detectChanges();
+                await fixture.whenStable();
+
+                const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+                expect(prevButton.title).toBe('ADF_VIEWER.ACTIONS.PREV_FILE');
+            });
+
+            it('should show both file navigation buttons', async () => {
+                component.allowNavigate = true;
+                component.canNavigateBefore = true;
+                component.canNavigateNext = true;
+
+                fixture.detectChanges();
+                await fixture.whenStable();
+
+                const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+                expect(nextButton).not.toBeNull();
+
+                const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+                expect(prevButton).not.toBeNull();
+            });
+
+            it('should not show navigation buttons', async () => {
+                component.allowNavigate = false;
+
+                fixture.detectChanges();
+                await fixture.whenStable();
+
+                const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+                expect(nextButton).toBeNull();
+
+                const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+                expect(prevButton).toBeNull();
+            });
+
+            it('should now show navigation buttons even if navigation enabled', async () => {
+                component.allowNavigate = true;
+                component.canNavigateBefore = false;
+                component.canNavigateNext = false;
+
+                fixture.detectChanges();
+                await fixture.whenStable();
+
+                const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+                expect(nextButton).toBeNull();
+
+                const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+                expect(prevButton).toBeNull();
+            });
+
             it('should render fullscreen button', () => {
                 expect(element.querySelector('[data-automation-id="adf-toolbar-fullscreen"]')).toBeDefined();
             });