From a28ed980954433dc05fa401d09d657dbcc60991d Mon Sep 17 00:00:00 2001
From: MeAkib <akibh805@gmail.com>
Date: Wed, 23 Sep 2026 20:57:34 +0600
Subject: [PATCH] docs: move header link icon to the right to align with
 Angular style

---
 docs/src/styles/_markdown.scss                | 22 +++++++++----------
 tools/dgeni/templates/class.template.html     |  2 +-
 tools/dgeni/templates/constant.template.html  |  2 +-
 .../dgeni/templates/entry-point.template.html | 16 +++++++-------
 tools/dgeni/templates/interface.template.html |  2 +-
 .../dgeni/templates/type-alias.template.html  |  2 +-
 .../markdown-to-html/docs-marked-renderer.mts |  2 +-
 .../docs-marked-renderer.spec.mts             |  4 ++--
 8 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/docs/src/styles/_markdown.scss b/docs/src/styles/_markdown.scss
index aa9184a507a9..9750a768e6a3 100644
--- a/docs/src/styles/_markdown.scss
+++ b/docs/src/styles/_markdown.scss
@@ -8,23 +8,24 @@
       color: var(--mat-sys-primary);
     }
 
+    h1,
+    h2,
+    h3 {
+      font-weight: 400;
+      margin: 32px 0 16px;
+    }
+
     h1 {
       display: inline-block;
       font-size: 32px;
-      font-weight: 400;
-      margin: 32px 0 16px;
     }
 
     h2 {
       font-size: 28px;
-      margin: 32px 0 16px;
-      font-weight: 400;
     }
 
     h3 {
       font-size: 24px;
-      margin: 32px 0 16px;
-      font-weight: 400;
     }
 
     h4 {
@@ -92,11 +93,10 @@
 
   .docs-header-link {
     header-link {
-      // deduct -30px so the anchor icon will be positioned outside the content
-      margin-left: -30px;
-      // Slight margin to try and center the icon better.
-      margin-top: 2px;
-      display: inline-block;
+      // Slight margin so the anchor icon isn't flush against the heading text.
+      margin-left: 8px;
+      display: inline-flex;
+      align-items: center;
       vertical-align: middle;
 
       // stylelint-disable-next-line material/no-prefixes
diff --git a/tools/dgeni/templates/class.template.html b/tools/dgeni/templates/class.template.html
index c9a4859bfdde..00058a563149 100644
--- a/tools/dgeni/templates/class.template.html
+++ b/tools/dgeni/templates/class.template.html
@@ -1,7 +1,6 @@
 {% import "macros.html" as macros %}
 
 <h4 id="{$ class.name $}" class="docs-header-link docs-api-h4 docs-api-class-name">
-  <span header-link="{$ class.name $}"></span>
   <code>{$ class.name $}</code>
   {% if class.extendedDoc %}
   <span class="docs-api-class-extends-clauses">
@@ -11,6 +10,7 @@ <h4 id="{$ class.name $}" class="docs-header-link docs-api-h4 docs-api-class-nam
     </a>
   </span>
   {% endif %}
+  <span header-link="{$ class.name $}"></span>
 </h4>
 
 {%- if class.description -%}
diff --git a/tools/dgeni/templates/constant.template.html b/tools/dgeni/templates/constant.template.html
index 704df309c180..4247342f9aa7 100644
--- a/tools/dgeni/templates/constant.template.html
+++ b/tools/dgeni/templates/constant.template.html
@@ -1,8 +1,8 @@
 {% import "macros.html" as macros %}
 
 <h4 id="{$ constant.name $}" class="docs-header-link docs-api-h4 docs-api-constant-name">
-  <span header-link="{$ constant.name $}"></span>
   <code>{$ constant.name $}</code>
+  <span header-link="{$ constant.name $}"></span>
 </h4>
 
 {%- if constant.isDeprecated -%}
diff --git a/tools/dgeni/templates/entry-point.template.html b/tools/dgeni/templates/entry-point.template.html
index b5437ba42c5b..c0a29d7712f2 100644
--- a/tools/dgeni/templates/entry-point.template.html
+++ b/tools/dgeni/templates/entry-point.template.html
@@ -52,8 +52,8 @@ <h2>
 
   {%- if doc.services.length -%}
     <h3 id="{$ doc.name $}-services" class="docs-header-link docs-api-h3">
-      <span header-link="services"></span>
       Services
+      <span header-link="services"></span>
     </h3>
     {% for service in doc.services %}
       {$ class(service) $}
@@ -62,8 +62,8 @@ <h3 id="{$ doc.name $}-services" class="docs-header-link docs-api-h3">
 
   {%- if doc.components.length -%}
     <h3 id="{$ doc.name $}-components" class="docs-header-link docs-api-h3">
-      <span header-link="components"></span>
       Components
+      <span header-link="components"></span>
     </h3>
     {% for component in doc.components %}
       {$ class(component) $}
@@ -72,8 +72,8 @@ <h3 id="{$ doc.name $}-components" class="docs-header-link docs-api-h3">
 
   {%- if doc.directives.length -%}
     <h3 id="{$ doc.name $}-directives" class="docs-header-link docs-api-h3">
-      <span header-link="directives"></span>
       Directives
+      <span header-link="directives"></span>
     </h3>
     {% for directive in doc.directives %}
       {$ class(directive) $}
@@ -82,8 +82,8 @@ <h3 id="{$ doc.name $}-directives" class="docs-header-link docs-api-h3">
 
   {%- if doc.classes.length -%}
     <h3 id="{$ doc.name $}-classes" class="docs-header-link docs-api-h3">
-      <span header-link="classes"></span>
       Classes
+      <span header-link="classes"></span>
     </h3>
     {% for other in doc.classes %}
       {$ class(other) $}
@@ -92,8 +92,8 @@ <h3 id="{$ doc.name $}-classes" class="docs-header-link docs-api-h3">
 
   {%- if doc.interfaces.length -%}
     <h3 id="{$ doc.name $}-interfaces" class="docs-header-link docs-api-h3">
-      <span header-link="interfaces"></span>
       Interfaces
+      <span header-link="interfaces"></span>
     </h3>
     {% for item in doc.interfaces %}
       {$ interface(item) $}
@@ -102,8 +102,8 @@ <h3 id="{$ doc.name $}-interfaces" class="docs-header-link docs-api-h3">
 
   {%- if doc.functions.length -%}
     <h3 id="{$ doc.name $}-functions" class="docs-header-link docs-api-h3">
-      <span header-link="functions"></span>
       Functions
+      <span header-link="functions"></span>
     </h3>
     {% for item in doc.functions %}
       {#
@@ -116,8 +116,8 @@ <h3 id="{$ doc.name $}-functions" class="docs-header-link docs-api-h3">
 
   {%- if doc.typeAliases.length -%}
     <h3 id="{$ doc.name $}-type_aliases" class="docs-header-link docs-api-h3">
-      <span header-link="type_aliases"></span>
       Type aliases
+      <span header-link="type_aliases"></span>
     </h3>
     {% for item in doc.typeAliases %}
       {$ typeAlias(item) $}
@@ -126,8 +126,8 @@ <h3 id="{$ doc.name $}-type_aliases" class="docs-header-link docs-api-h3">
 
   {%- if doc.constants.length -%}
     <h3 id="{$ doc.name $}-constants" class="docs-header-link docs-api-h3">
-      <span header-link="constants"></span>
       Constants
+      <span header-link="constants"></span>
     </h3>
     {% for item in doc.constants %}
       {$ constant(item) $}
diff --git a/tools/dgeni/templates/interface.template.html b/tools/dgeni/templates/interface.template.html
index 32c423409540..dd2fbaae0c77 100644
--- a/tools/dgeni/templates/interface.template.html
+++ b/tools/dgeni/templates/interface.template.html
@@ -1,8 +1,8 @@
 {% import "macros.html" as macros %}
 
 <h4 id="{$ interface.name $}" class="docs-header-link docs-api-h4 docs-api-interface-name">
-  <span header-link="{$ interface.name $}"></span>
   <code>{$ interface.name $}</code>
+  <span header-link="{$ interface.name $}"></span>
 </h4>
 
 {%- if interface.description -%}
diff --git a/tools/dgeni/templates/type-alias.template.html b/tools/dgeni/templates/type-alias.template.html
index 9da26b2bb097..84c96b125aa0 100644
--- a/tools/dgeni/templates/type-alias.template.html
+++ b/tools/dgeni/templates/type-alias.template.html
@@ -1,8 +1,8 @@
 {% import "macros.html" as macros %}
 
 <h4 id="{$ alias.name $}" class="docs-header-link docs-api-h4 docs-api-type-alias-name">
-  <span header-link="{$ alias.name $}"></span>
   <code>{$ alias.name $}</code>
+  <span header-link="{$ alias.name $}"></span>
 </h4>
 
 {%- if alias.isDeprecated -%}
diff --git a/tools/markdown-to-html/docs-marked-renderer.mts b/tools/markdown-to-html/docs-marked-renderer.mts
index 8589c6afada7..146be1b9b7e4 100644
--- a/tools/markdown-to-html/docs-marked-renderer.mts
+++ b/tools/markdown-to-html/docs-marked-renderer.mts
@@ -38,8 +38,8 @@ export class DocsMarkdownRenderer extends Renderer {
       this._seenIds.add(headingId);
       return `
         <h${depth} id="${headingId}" class="docs-header-link">
-          <span header-link="${headingId}"></span>
           ${content}
+          <span header-link="${headingId}"></span>
         </h${depth}>
       `;
     }
diff --git a/tools/markdown-to-html/docs-marked-renderer.spec.mts b/tools/markdown-to-html/docs-marked-renderer.spec.mts
index e1003e1ba70b..51553740c59a 100644
--- a/tools/markdown-to-html/docs-marked-renderer.spec.mts
+++ b/tools/markdown-to-html/docs-marked-renderer.spec.mts
@@ -24,8 +24,8 @@ describe('DocsMarkdownRenderer', () => {
       `
         <div class="docs-markdown">
           <h3 id="header-3" class="docs-header-link">
-            <span header-link="header-3"></span>
             header 3
+            <span header-link="header-3"></span>
           </h3>
         </div>
       `,
@@ -35,8 +35,8 @@ describe('DocsMarkdownRenderer', () => {
       `
         <div class="docs-markdown">
           <h4 id="header-4" class="docs-header-link">
-            <span header-link="header-4"></span>
             header 4
+            <span header-link="header-4"></span>
           </h4>
         </div>
       `,