From b365698d2737563060fb8e89b5abd415ccff9a23 Mon Sep 17 00:00:00 2001
From: GUOZIJAN <GUOZIJAN@users.noreply.github.com>
Date: Fri, 30 Oct 2026 02:25:18 +0800
Subject: [PATCH 1/2] fix(Text): render icon before title instead of before
 value

The icon was rendered inside DisplayText, between the label (title)
and the value. Render it through the label instead so it appears
before the title, as specified in #2170.
---
 src/app-components/Text/DisplayText.tsx | 13 +------------
 src/components/label/Label.tsx          |  3 +++
 src/layout/Text/TextComponent.tsx       |  9 +++++++--
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/app-components/Text/DisplayText.tsx b/src/app-components/Text/DisplayText.tsx
index 3cf5b63167..6502444ae4 100644
--- a/src/app-components/Text/DisplayText.tsx
+++ b/src/app-components/Text/DisplayText.tsx
@@ -1,23 +1,12 @@
 import React from 'react';
 
-import classes from 'src/app-components/Text/Text.module.css';
-
 interface TextProps {
   value: string;
-  iconUrl?: string;
-  iconAltText?: string;
   labelId?: string;
 }
 
-export const DisplayText = ({ value, iconUrl, iconAltText, labelId }: TextProps) => (
+export const DisplayText = ({ value, labelId }: TextProps) => (
   <>
-    {iconUrl && (
-      <img
-        src={iconUrl}
-        className={classes.icon}
-        alt={iconAltText}
-      />
-    )}
     {labelId && <span aria-labelledby={labelId}>{value}</span>}
     {!labelId && <span>{value}</span>}
   </>
diff --git a/src/components/label/Label.tsx b/src/components/label/Label.tsx
index e4a2f862ad..a44a1c4744 100644
--- a/src/components/label/Label.tsx
+++ b/src/components/label/Label.tsx
@@ -24,6 +24,7 @@ export type LabelProps = PropsWithChildren<{
   className?: string;
   overrideId?: string;
   textResourceBindings?: ExprResolved<TRBLabel>;
+  icon?: React.ReactNode;
 }> &
   DesignsystemetLabelProps;
 
@@ -46,6 +47,7 @@ export function LabelInner(props: LabelInnerProps) {
     overrideId,
     renderLabelAs,
     className,
+    icon,
     textResourceBindings: overriddenTrb,
     ...designsystemetLabelProps
   } = props;
@@ -100,6 +102,7 @@ export function LabelInner(props: LabelInnerProps) {
         >
           {/* we want this "label" not to be rendered as a <label>,
            because it does not belong to an input element */}
+          {icon}
           <LabelGridItemWrapper labelGrid={grid?.labelGrid}>
             <DesignsystemetLabel
               asChild
diff --git a/src/layout/Text/TextComponent.tsx b/src/layout/Text/TextComponent.tsx
index 6b4da3c876..5a762c150b 100644
--- a/src/layout/Text/TextComponent.tsx
+++ b/src/layout/Text/TextComponent.tsx
@@ -30,12 +30,17 @@ export const TextComponent = ({ baseComponentId }: PropsFromGenericComponent<'Te
           classes.textComponent,
           direction === 'vertical' ? classes.vertical : classes.horizontal,
         ),
+        icon: icon && (
+          <img
+            src={icon}
+            className={classes.icon}
+            alt={langAsString(textResourceBindings.title)}
+          />
+        ),
       }}
     >
       <DisplayText
         value={value}
-        iconUrl={icon}
-        iconAltText={langAsString(textResourceBindings.title)}
         labelId={getLabelId(id)}
       />
     </ComponentStructureWrapper>

From 6dde81b0fd1e813c6f829f3b1128232032da830b Mon Sep 17 00:00:00 2001
From: GUOZIJAN <GUOZIJAN@users.noreply.github.com>
Date: Fri, 30 Oct 2026 23:25:22 +0800
Subject: [PATCH 2/2] fix(label): lay out icon beside the title in both
 directions

Keep the icon in the same grid item as the title and align them in a
row, so it does not occupy its own row in vertical layouts nor stretch
to the height of a multiline value in horizontal ones.
---
 src/components/label/Label.module.css |  5 ++++
 src/components/label/Label.tsx        | 34 +++++++++++++++++++--------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/label/Label.module.css b/src/components/label/Label.module.css
index 8004622a5a..97ef408106 100644
--- a/src/components/label/Label.module.css
+++ b/src/components/label/Label.module.css
@@ -3,6 +3,11 @@
   gap: var(--ds-size-2);
 }
 
+.iconWithTitle {
+  display: flex;
+  align-items: center;
+}
+
 .fullWidth {
   width: 100%;
 }
diff --git a/src/components/label/Label.tsx b/src/components/label/Label.tsx
index a44a1c4744..3a926bb525 100644
--- a/src/components/label/Label.tsx
+++ b/src/components/label/Label.tsx
@@ -102,17 +102,31 @@ export function LabelInner(props: LabelInnerProps) {
         >
           {/* we want this "label" not to be rendered as a <label>,
            because it does not belong to an input element */}
-          {icon}
           <LabelGridItemWrapper labelGrid={grid?.labelGrid}>
-            <DesignsystemetLabel
-              asChild
-              {...designsystemetLabelProps}
-            >
-              <LabelContent
-                {...labelContentProps}
-                id={id}
-              />
-            </DesignsystemetLabel>
+            {icon ? (
+              <span className={classes.iconWithTitle}>
+                {icon}
+                <DesignsystemetLabel
+                  asChild
+                  {...designsystemetLabelProps}
+                >
+                  <LabelContent
+                    {...labelContentProps}
+                    id={id}
+                  />
+                </DesignsystemetLabel>
+              </span>
+            ) : (
+              <DesignsystemetLabel
+                asChild
+                {...designsystemetLabelProps}
+              >
+                <LabelContent
+                  {...labelContentProps}
+                  id={id}
+                />
+              </DesignsystemetLabel>
+            )}
           </LabelGridItemWrapper>
           {children}
         </span>