Some <Icon /> sources not rendering in small viewports

muchisx · April 21, 2025, 2:57am

I tried it in both Chrome and Firefox, same thing.

Demonstration:

Debug via:

export function Icons() {
  return (
    <BlockStack>
      <View>
        <TextBlock>Sources</TextBlock>

        <TextBlock>Arrow down</TextBlock>
        <Icon source="arrowDown" />

        <TextBlock>Arrow left</TextBlock>
        <Icon source="arrowLeft" />

        <TextBlock>Arrow right</TextBlock>
        <Icon source="arrowRight" />

        <TextBlock>Arrow up</TextBlock>
        <Icon source="arrowUp" />

        <TextBlock>Arrow up right</TextBlock>
        <Icon source="arrowUpRight" />

        <TextBlock>Bag</TextBlock>
        <Icon source="bag" />

        <TextBlock>Bullter</TextBlock>
        <Icon source="bullet" />

        <TextBlock>Calendar</TextBlock>
        <Icon source="calendar" />

        <TextBlock>Camera</TextBlock>
        <Icon source="camera" />

        <TextBlock>Caret down</TextBlock>
        <Icon source="caretDown" />

        <TextBlock>Cart</TextBlock>
        <Icon source="cart" />

        <TextBlock>Cash dollar</TextBlock>
        <Icon source="cashDollar" />

        <TextBlock>Categories</TextBlock>
        <Icon source="categories" />

        <TextBlock>Checkmark</TextBlock>
        <Icon source="checkmark" />

        <TextBlock>Chevron down</TextBlock>
        <Icon source="chevronDown" />

        <TextBlock>Chevron left</TextBlock>
        <Icon source="chevronLeft" />

        <TextBlock>Chevron right</TextBlock>
        <Icon source="chevronRight" />

        <TextBlock>Chevron up</TextBlock>
        <Icon source="chevronUp" />

        <TextBlock>Clipboard</TextBlock>
        <Icon source="clipboard" />

        <TextBlock>Clock</TextBlock>
        <Icon source="clock" />

        <TextBlock>Close</TextBlock>
        <Icon source="close" />

        <TextBlock>Credit card</TextBlock>
        <Icon source="creditCard" />

        <TextBlock>Critical</TextBlock>
        <Icon source="critical" />

        <TextBlock>Delete</TextBlock>
        <Icon source="delete" />

        <TextBlock>Delivered</TextBlock>
        <Icon source="delivered" />

        <TextBlock>Delivery</TextBlock>
        <Icon source="delivery" />

        <TextBlock>Disabled</TextBlock>
        <Icon source="disabled" />

        <TextBlock>Discount</TextBlock>
        <Icon source="discount" />

        <TextBlock>Email</TextBlock>
        <Icon source="email" />

        <TextBlock>Empty</TextBlock>
        <Icon source="error" />

        <TextBlock>Error Fill</TextBlock>
        <Icon source="errorFill" />

        <TextBlock>External</TextBlock>
        <Icon source="external" />

        <TextBlock>Filter</TextBlock>
        <Icon source="filter" />

        <TextBlock>Geolocation</TextBlock>
        <Icon source="geolocation" />

        <TextBlock>Gift</TextBlock>
        <Icon source="gift" />

        <TextBlock>Gift Fill</TextBlock>
        <Icon source="giftFill" />

        <TextBlock>Grid</TextBlock>
        <Icon source="grid" />

        <TextBlock>Hamburger</TextBlock>
        <Icon source="hamburger" />

        <TextBlock>Hollow Cricle</TextBlock>
        <Icon source="hollowCircle" />

        <TextBlock>Horizontal Dots</TextBlock>
        <Icon source="horizontalDots" />

        <TextBlock>Image</TextBlock>
        <Icon source="image" />

        <TextBlock>Info</TextBlock>
        <Icon source="info" />

        <TextBlock>Info Fill</TextBlock>
        <Icon source="infoFill" />

        <TextBlock>List</TextBlock>
        <Icon source="list" />

        <TextBlock>Lock</TextBlock>
        <Icon source="lock" />

        <TextBlock>Magnifiy</TextBlock>
        <Icon source="magnify" />

        <TextBlock>Map</TextBlock>
        <Icon source="map" />

        <TextBlock>Marker</TextBlock>
        <Icon source="marker" />

        <TextBlock>Minus</TextBlock>
        <Icon source="minus" />

        <TextBlock>Mobile</TextBlock>
        <Icon source="mobile" />

        <TextBlock>Note</TextBlock>
        <Icon source="note" />

        <TextBlock>Order Box</TextBlock>
        <Icon source="orderBox" />

        <TextBlock>Pen</TextBlock>
        <Icon source="pen" />

        <TextBlock>Plus</TextBlock>
        <Icon source="plus" />

        <TextBlock>Profile</TextBlock>
        <Icon source="profile" />

        <TextBlock>Question</TextBlock>
        <Icon source="question" />

        <TextBlock>Question Fill</TextBlock>
        <Icon source="questionFill" />

        <TextBlock>Reorder</TextBlock>
        <Icon source="reorder" />

        <TextBlock>Reset</TextBlock>
        <Icon source="reset" />

        <TextBlock>Return</TextBlock>
        <Icon source="return" />

        <TextBlock>Savings</TextBlock>
        <Icon source="savings" />

        <TextBlock>Settings</TextBlock>
        <Icon source="settings" />

        <TextBlock>Star</TextBlock>
        <Icon source="star" />

        <TextBlock>Star Fill</TextBlock>
        <Icon source="starFill" />

        <TextBlock>Star Half</TextBlock>
        <Icon source="starHalf" />

        <TextBlock>Store</TextBlock>
        <Icon source="store" />

        <TextBlock>Success</TextBlock>
        <Icon source="success" />

        <TextBlock>Truck</TextBlock>
        <Icon source="truck" />

        <TextBlock>Upload</TextBlock>
        <Icon source="upload" />

        <TextBlock>Vertical Dots</TextBlock>
        <Icon source="verticalDots" />

        <TextBlock>Warning</TextBlock>
        <Icon source="warning" />

        <TextBlock>Warning Fill</TextBlock>
        <Icon source="warningFill" />
      </View>

      <View>
        <Icon source="warningFill" />
      </View>
    </BlockStack>
  );
}

Alan_G · April 21, 2025, 7:51pm

Hey @muchisx - thanks for sharing the test component there. I can’t say for sure why this is happening, but I have seen this kind of thing happen because of the layout around the icons, if that makes sense. For example, like the <BlockStack>, <View>, or <InlineStack> they’re placed inside.

Would you be able share a snippet of the code from the component where you’re using these icons in your extension? Seeing how they’re nested within those layout components could show us if they’re getting hidden or squished on mobile/smaller viewports and help us dig into this a bit further.

muchisx · April 21, 2025, 10:09pm

Hi @Alan_G !

The snippet above is all that the extension I used to test included, here’s more info

// Inspector.tsx
import { reactExtension } from "@shopify/ui-extensions-react/customer-account";
import { Icons } from "./Icons";

export default reactExtension("customer-account.order-index.block.render", () => <Inspector />);

function Inspector() {
  return <Icons />; // The snippet I sent above
}

# shopify.extension.toml

# Learn more about configuring your Customer account UI extension:
# https://shopify.dev/api/customer-account-ui-extensions/unstable/configuration

# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2025-04"

[[extensions]]
name = "customer-account-ui"
handle = "customer-account-ui"
type = "ui_extension"


# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/extension-targets-overview

[[extensions.targeting]]
module = "./src/Inspector.tsx"
target = "customer-account.order-index.block.render"

[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/configuration#api-access
api_access = true

# Gives your extension access to make external network calls, using the
# JavaScript `fetch()` API. Learn more:
# https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/configuration#network-access
# network_access = true

// package.json
{
  "name": "customer-account-ui",
  "private": true,
  "version": "1.0.0",
  "license": "UNLICENSED",
  "dependencies": {
    "react": "^18.0.0",
    "@shopify/ui-extensions": "2025.04.x",
    "@shopify/ui-extensions-react": "2025.04.x",
    "react-reconciler": "0.29.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0"
  }
}

Alan_G · April 22, 2025, 7:10pm

Thanks @muchisx - I really appreciate all of the context here! It doesn’t look like you’re using super complex wrapping here, so it is odd that they’re just appearing to disappear there. Could you try looking at your browser tools again and resize the window to the smaller viewport size where the icons disappear?

If you can share the the specific area where a missing icon should be and find the corresponding element in the DOM inspector (it should be something like an <img>, <svg>, or a wrapper <div> generated by the <Icon> component), can you check to see if the element is popping up in the DOM tree?

If it’s present there, can you share the display, visibility, width, height, opacity, or any clip / overflow properties that might be hiding it. I think you might have been showing this in the earlier video, but I couldn’t see the values change. If you can compare these style configs to when the viewport is larger and the icon is visible that might help us track down where the error is occurring.

Also, are you seeing any console errors, in the main window or potentially the extension’s iframe console? Just want to see if we can track down anything further there.

I think we’ll need to do some further digging on our end here, but wanted to follow up with you to see if you could share that info. No worries if not though, once I hear back from you, I’ll look into this further on my end and loop back when I have more info.

Liam-Shopify · May 4, 2025, 7:19am

Hi @muchisx

Are you still seeing this issue?

muchisx · May 4, 2025, 1:47pm

Hi @Liam-Shopify @Alan_G

I’ve tested again with the same setup and it seems to have been fixed thanks!
Sorry I didn’t see the previous post asking for more details!

Topic		Replies	Views
Checkout UI extension render Extensions checkout-ui-ext	8	48	March 14, 2025
Checkout UI Extensions not appearing on live site Extensions checkout-ui-ext	1	512	November 25, 2024
Checkout extension not rendering TextField for specific store Extensions checkout-ui-ext	4	62	December 12, 2024
How to Add Icon to Checkout UI Extensions Extensions checkout-ui-ext	1	43	December 20, 2024
[Docs] PaymentIcon shop-pay or shopify-pay? Extensions customer-account-ext	3	16	March 24, 2025

Some <Icon /> sources not rendering in small viewports

Related topics