diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 48bc9374ad..200da433c5 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -204,25 +204,24 @@ code {
 // We add the icon to all external links which are identified as absolute links (those that start with `http:` or https:`).
 // For more info see PR #36601.
 @include docs-pages {
-  aio-doc-viewer{
-    a {
-      &[href^="http:"]::after,
-      &[href^="https:"]::after {
-        font-family: "Material Icons";
-        content: "open_in_new";
-        margin-left: 2px;
-        position: relative;
-        @include line-height(24);
-        vertical-align: middle;
-      }
-    }
+  aio-doc-viewer {
+    // The docs-viewer also contain links to GitHub (e.g. the "edit this page" icon) identified with
+    // the `.github-links` class. We don't want to add the external link icon to these links.
+    :not(.github-links) {
+      > a {
+        &[href^="http:"],
+        &[href^="https:"] {
+          display: inline-flex;
+          padding-right: calc(1em + 0.25rem);
+          position: relative;
 
-    // The docs-viewer also contain links to GitHub (e.g. the edit this page icon) identified with `.github-links` class.
-    // We don't want to add the external link icon to these links, so we hide them.
-    .github-links a {
-      &[href^="http:"]::after,
-      &[href^="https:"]::after {
-        display: none;
+          &::after {
+            content: "open_in_new";
+            font-family: "Material Icons";
+            position: absolute;
+            right: 0;
+          }
+        }
       }
     }
   }
diff --git a/aio/src/styles/2-modules/_presskit.scss b/aio/src/styles/2-modules/_presskit.scss
index 6c3b43ec8a..2ac62639ab 100644
--- a/aio/src/styles/2-modules/_presskit.scss
+++ b/aio/src/styles/2-modules/_presskit.scss
@@ -50,14 +50,16 @@
           padding: 0;
 
           a {
-            display: flex;
-            align-items: center;
+            display: inline-flex;
+            padding-right: 3rem;
+            position: relative;
 
-            &:after {
-              font-family: 'Material Icons';
-              content: 'cloud_download';
+            &::after {
+              content: "cloud_download";
+              font-family: "Material Icons";
               @include font-size(24);
-              margin-left: 0.5rem;
+              position: absolute;
+              right: 0;
             }
           }
         }