diff --git a/docs/core/components/header.component.md b/docs/core/components/header.component.md
index 90e4ace1ab..c3dbbc4ad2 100644
--- a/docs/core/components/header.component.md
+++ b/docs/core/components/header.component.md
@@ -46,6 +46,8 @@ body of the element:
| showSidenavToggle | `boolean` | true | Toggles whether the sidenav button will be displayed in the header or not. |
| title | `string` | | Title of the application. |
| tooltip | `string` | | The tooltip text for the application logo. |
+| toggleIcon | `string` | "menu" | The toggle icon that will be used inside header. |
+| showLogo | `boolean` | true | Toggles whether the logo will be displayed inside the header or not. |
### Events
diff --git a/lib/core/src/lib/layout/components/header/header.component.html b/lib/core/src/lib/layout/components/header/header.component.html
index c266389b77..757ee41725 100644
--- a/lib/core/src/lib/layout/components/header/header.component.html
+++ b/lib/core/src/lib/layout/components/header/header.component.html
@@ -13,10 +13,10 @@
menu
+ aria-hidden="true">{{ toggleIcon }}
-
+
menu
+ aria-hidden="true">{{ toggleIcon }}
diff --git a/lib/core/src/lib/layout/components/header/header.component.spec.ts b/lib/core/src/lib/layout/components/header/header.component.spec.ts
index 3f69d8deba..f454fc45b4 100644
--- a/lib/core/src/lib/layout/components/header/header.component.spec.ts
+++ b/lib/core/src/lib/layout/components/header/header.component.spec.ts
@@ -175,6 +175,43 @@ describe('HeaderLayoutComponent', () => {
expect(buttonStart === null).toBeFalsy();
expect(buttonEnd === null).toBeTruthy();
});
+
+ it('should display the logo image when the input is set to true [showLogo=true]', () => {
+ component.showLogo = true;
+ fixture.detectChanges();
+
+ const logo = fixture.debugElement.query(By.css('.adf-app-logo'));
+
+ expect(logo.nativeElement).not.toBeNull();
+ });
+
+ it('should NOT display the logo image when the input is set to false [showLogo=false]', () => {
+ component.showLogo = false;
+ fixture.detectChanges();
+
+ const logo = fixture.debugElement.query(By.css('.adf-app-logo'));
+
+ expect(logo).toBeNull();
+ });
+
+ it('should display the default toggle icon', () => {
+ component.showSidenavToggle = true;
+ fixture.detectChanges();
+
+ const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
+
+ expect(toggleIcon.nativeElement.textContent).toBe('menu');
+ });
+
+ it('should display the correct toggle icon', () => {
+ component.showSidenavToggle = true;
+ component.toggleIcon = 'apps';
+ fixture.detectChanges();
+
+ const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
+
+ expect(toggleIcon.nativeElement.textContent).toBe('apps');
+ });
});
describe('Template transclusion', () => {
diff --git a/lib/core/src/lib/layout/components/header/header.component.ts b/lib/core/src/lib/layout/components/header/header.component.ts
index 704069eed8..d06e43b5a7 100644
--- a/lib/core/src/lib/layout/components/header/header.component.ts
+++ b/lib/core/src/lib/layout/components/header/header.component.ts
@@ -33,6 +33,9 @@ export class HeaderLayoutComponent implements OnInit {
/** Path to an image file for the application logo. */
@Input() logo: string;
+ /** Toggles whether the logo will be displayed inside the header or not. */
+ @Input() showLogo: boolean = true;
+
/** The router link for the application logo, when clicked. */
@Input() redirectUrl: string | any[] = '/';
@@ -51,6 +54,9 @@ export class HeaderLayoutComponent implements OnInit {
*/
@Input() showSidenavToggle: boolean = true;
+ /** The toggle icon that will be used inside header. */
+ @Input() toggleIcon = 'menu';
+
/** Emitted when the sidenav button is clicked. */
@Output() clicked = new EventEmitter();