diff --git a/aio/src/app/layout/nav-item/nav-item.component.html b/aio/src/app/layout/nav-item/nav-item.component.html
index 0ec330e0b85..ce330468ebc 100644
--- a/aio/src/app/layout/nav-item/nav-item.component.html
+++ b/aio/src/app/layout/nav-item/nav-item.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="!node.children">
   <a href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
     class="vertical-menu-item">
-    <span>{{node.title}}</span>
+    <span class="vertical-menu-item-text">{{node.title}}</span>
   </a>
 </div>
 
diff --git a/aio/src/styles/1-layouts/sidenav/_sidenav.scss b/aio/src/styles/1-layouts/sidenav/_sidenav.scss
index d17b79ece94..b805d9e9171 100644
--- a/aio/src/styles/1-layouts/sidenav/_sidenav.scss
+++ b/aio/src/styles/1-layouts/sidenav/_sidenav.scss
@@ -91,6 +91,22 @@ aio-nav-menu {
       }
     }
 
+    a.vertical-menu-item {
+      &[href^="http:"],
+      &[href^="https:"] {
+        .vertical-menu-item-text {
+          display: inline-flex;
+          align-items: center;
+          &::after {
+            content: "\e89e"; // codepoint for "open_in_new"
+            margin-left: 0.3rem;
+            line-height: normal;
+            font-family: "Material Icons";
+          }
+        }
+      }
+    }
+
     button.vertical-menu-item {
       border: none;
       background-color: transparent;