[Anchor] Revert #2624 and replace with a better solution (#2640)

Co-authored-by: Denis Voituron <[email protected]>

Author: vnbaaij

examples/Demo/Shared/Pages/Anchor/AnchorPage.razor

@@ -25,7 +25,11 @@
 
 <DemoSection Title="Appearance" Component="@typeof(AnchorAppearance)" CollocatedFiles="@(new[] {"css"})"></DemoSection>
 
-<DemoSection Title="Anchors with icons" Component="@typeof(AnchorIcons)"></DemoSection>
+<DemoSection Title="Anchors with icons" Component="@typeof(AnchorIcons)">
+    <Description>
+        <p>By placing the icon the content of the anchor, it is possible to specify a <code>Color</code> for the icon.</p>
+    </Description>
+</DemoSection>
 
 <h2 id="documentation">Documentation</h2>
 

examples/Demo/Shared/Pages/Anchor/Examples/AnchorIcons.razor

@@ -1,34 +1,43 @@
 <h4>Neutral appearane</h4>
 <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 1em;">
     <FluentAnchor Href="#" IconStart="@(new Icons.Regular.Size16.Globe())">
-        With icon at start
+        Icon at start
     </FluentAnchor>
 
     <FluentAnchor Href="#" IconEnd="@(new Icons.Regular.Size16.Globe())">
-        With icon at end
+        Icon at end
+    </FluentAnchor>
+
+    <FluentAnchor Href="#">
+        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="start" />
+        Icon at start in content
+    </FluentAnchor>
+
+    <FluentAnchor Href="#">
+        Icon at end in content
+        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="end" />
     </FluentAnchor>
 </div>
 <h4>Hypertext appearane</h4>
 <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 1em;">
     <FluentAnchor Appearance="@Appearance.Hypertext" Href="#" IconStart="@(new Icons.Regular.Size16.Globe())">
-        With icon at start
+        Icon at start
     </FluentAnchor>
 
     <FluentAnchor Appearance="@Appearance.Hypertext" Href="#" IconEnd="@(new Icons.Regular.Size16.Globe())">
-        With icon at end
+        Icon at end
     </FluentAnchor>
-</div>
 
-<p>With icon in the content. By doing it this way, it is possible to specify <code>Color</code> for the icon.</p>
-<FluentAnchor Href="#">
-    With icon in content
-    <FluentIcon Value="@(new Icons.Regular.Size32.Globe())" Color="@Color.Success" Slot="end" />
-</FluentAnchor>
+    <FluentAnchor Appearance="@Appearance.Hypertext" Href="#">
+        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="start" />
+        Icon at start in content
+    </FluentAnchor>
 
-<FluentAnchor Appearance="@Appearance.Hypertext"  Href="#">
-    With icon in content
-    <FluentIcon Value="@(new Icons.Regular.Size32.Globe())" Color="@Color.Success" Slot="end" />
-</FluentAnchor>
+    <FluentAnchor Appearance="@Appearance.Hypertext" Href="#">
+        Icon at start in content
+        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="end" />
+    </FluentAnchor>
+</div>
 
 <div style="display: flex; align-items: center; gap: 10px; margin-top: 1em;">
     With icon in default slot:

src/Core/Components/Anchor/FluentAnchor.razor.css

@@ -1,11 +1,14 @@
-fluent-anchor[appearance="hypertext"]::part(control) {
-    display: inline-flex !important;
-}
 
 fluent-anchor[appearance="hypertext"]::part(start) {
+    display: unset;
+    position: relative;
+    top: calc(var(--design-unit)* 1px);
     margin-inline-end: calc(var(--design-unit) * 1px);
 }
 
 fluent-anchor[appearance="hypertext"]::part(end) {
+    display: unset;
+    position: relative;
+    top: calc(var(--design-unit)* 1px);
     margin-inline-start: calc(var(--design-unit) * 1px);
 }