diff --git a/skills/igniteui-angular-components/references/data-display.md b/skills/igniteui-angular-components/references/data-display.md
index c63c3c1ac9c..0008ca33543 100644
--- a/skills/igniteui-angular-components/references/data-display.md
+++ b/skills/igniteui-angular-components/references/data-display.md
@@ -167,6 +167,12 @@ import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
 <igx-icon [family]="'my-icons'" [name]="'logo'"></igx-icon>
 ```
 
+Include Material Icons font in `index.html` for default icons:
+
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet" media="screen">
+```
+
 Register custom SVG icons in a service or component constructor:
 
 ```typescript
diff --git a/skills/igniteui-angular-components/references/layout.md b/skills/igniteui-angular-components/references/layout.md
index cb5ee4e2563..f7dc4aa7d6e 100644
--- a/skills/igniteui-angular-components/references/layout.md
+++ b/skills/igniteui-angular-components/references/layout.md
@@ -5,6 +5,7 @@
 
 ## Contents
 
+- [Navbar](#navbar)
 - [Tabs](#tabs)
 - [Bottom Navigation](#bottom-navigation)
 - [Stepper](#stepper)
@@ -12,6 +13,47 @@
 - [Splitter](#splitter)
 - [Navigation Drawer](#navigation-drawer)
 
+## Navbar
+> **Docs:** [Navbar Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navbar)
+
+```typescript
+import { IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective } from 'igniteui-angular/navbar';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxIconButtonDirective } from 'igniteui-angular/directives';
+```
+
+```html
+<igx-navbar title="Sample App">
+  <igx-navbar-action>
+    <button igxIconButton="flat">
+      <igx-icon family="fa" name="fa-home"></igx-icon>
+    </button>
+  </igx-navbar-action>
+
+  <div igxNavbarTitle>
+    <a href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank">
+    <img
+        src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
+        width="120px"
+        height="50px"
+        alt
+        style="margin-top: 7px;"
+    />
+    </a>
+  </div>
+
+  <button igxIconButton="flat">
+    <igx-icon>search</igx-icon>
+  </button>
+  <button igxIconButton="flat">
+    <igx-icon>favorite</igx-icon>
+  </button>
+  <button igxIconButton="flat">
+    <igx-icon>more_vert</igx-icon>
+  </button>
+</igx-navbar>
+```
+
 ## Tabs
 
 > **Docs:** [Tabs Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs)