fix: adjust icon container scaling and alignment issues

Author: yordan-st

packages/pluggableWidgets/image-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where showing icons as datasource would scale the icon container disproportionately and cause alignment issues.
+
 ## [1.5.0] - 2025-08-29
 
 ### Added

packages/pluggableWidgets/image-web/src/components/Image/Image.tsx

@@ -129,6 +129,7 @@ export const Image: FunctionComponent<ImageProps> = ({
         <ImageUi.Wrapper
             className={className}
             responsive={responsive}
+            type={type}
             hasImage={image !== undefined && image.length > 0}
         >
             {content}

packages/pluggableWidgets/image-web/src/components/Image/ui.tsx

@@ -19,6 +19,7 @@ export interface ImageWrapperProps {
     className?: string;
     responsive: boolean;
     hasImage: boolean;
+    type: string;
     children:
         | ReactElement<ImageContentIcon | ImageContentImage>
         | [ReactElement<ImageContentIcon | ImageContentImage>, ReactElement<LightboxProps> | false];
@@ -37,6 +38,7 @@ function Wrapper(props: ImageWrapperProps): ReactElement {
             className={classNames(
                 "mx-image-viewer",
                 { "mx-image-viewer-responsive": props.responsive },
+                { "mx-image-viewer-icon": props.type === "glyph" || props.type === "icon" },
                 props.className,
                 { hidden: !props.hasImage }
             )}
@@ -67,7 +69,7 @@ function ContentIcon(props: ImageContentIcon): ReactElement {
     return (
         <span
             className={classNames(props.icon, { glyphicon: props.isGlyph })}
-            style={{ ...props.style, fontSize: `${props.size}px` }}
+            style={{ fontSize: `${props.size}px` }}
             {...accessibilityProps}
             {...onClickProps}
         />

packages/pluggableWidgets/image-web/src/components/__tests__/__snapshots__/Image.spec.tsx.snap

@@ -16,7 +16,7 @@ exports[`Image renders the structure as a background image 1`] = `
 exports[`Image renders the structure with a glyph icon 1`] = `
 <DocumentFragment>
   <div
-    class="mx-image-viewer mx-image-viewer-responsive"
+    class="mx-image-viewer mx-image-viewer-responsive mx-image-viewer-icon"
   >
     <span
       class="glyphicon-asterisk glyphicon"
@@ -30,7 +30,7 @@ exports[`Image renders the structure with a glyph icon 1`] = `
 exports[`Image renders the structure with an icon 1`] = `
 <DocumentFragment>
   <div
-    class="mx-image-viewer mx-image-viewer-responsive"
+    class="mx-image-viewer mx-image-viewer-responsive mx-image-viewer-icon"
   >
     <span
       class="mx-icon mx-icon-asterisk"

packages/pluggableWidgets/image-web/src/ui/Image.scss

@@ -1,6 +1,9 @@
 .mx-image-viewer {
     width: 100%;
     height: 100%;
+    &-icon {
+        height: unset;
+    }
 }
 
 .mx-image-viewer-responsive img {