Should top actions dropdown items support custom images in addition to Fluent icons?

[mbice]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx 1.18.2

Issue description

Hi,

Looking at the documentation for Top Actions it looks like we should be able to set imageSrc and selectedImageSrc properties in order to render a custom image for a top action dropdown item. We would like to use this for scenarios where there is not an appropriate Fluent icon and we still want to show an image-based icon.

https://learn.microsoft.com/en-us/javascript/api/sp-top-actions/itopactionsdropdownoption?view=sp-typescript-latest#@microsoft-sp-top-actions-itopactionsdropdownoption-imagesrc-member

I've tried out both an image string path and base64 encoded string for imageSrc and selectedImageSrc and no image is shown. Is this expected? If not, is there a reason why this wouldn't be supported the same way we add images to choice group web part properties?

Thanks!

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[mbice]

Any update on whether or not this is officially supported? We often use custom iconography for our web parts and would like to move some of these properties into top actions for faster access by page authors. There are many cases in which we can't find appropriate Fluent equivalent icons to having support for custom images here would be a great capability. Thanks!

[SharePickle]

Still an issue. As a workaround you could use themableSvg property:

    options: [
      {
          key: AlignVariants.TopLeft,
          checked: selectedAlignment === AlignVariants.TopLeft,
          themableSvg: <AlignmentIcon alignment={AlignVariants.TopLeft} />,
          text: strings.TopActions.TopLeft
      }
    ]

[Amey-MSFT]

Hello @mbice, Thank you for bringing this issue to our attention. Could you please confirm if the issue still persists for you?

[mbice]

@Amey-MSFT I just re-tested with SPFx 1.21.1 and these properties (imageSrc and selectedImageSrc) still don't seem to work. Thanks!

[Amey-MSFT]

Hello @mbice, Can you please elaborate the repro steps? Thanks!!

[mbice]

@Amey-MSFT I guess my main question is whether or not this is even supposed to be supported at all. I haven't seen it in any working samples, but the property is there in the interface documentation so I tried it, hoping it would work.

Basically, instead of providing a fluent "icon" property, I tried populating both imageSrc and selectedImageSrc with both a base64 and an absolute path image src. I tried this for both a top action button and for top action dropdown options.

e.g.

Hope that helps. Thanks!

[Amey-MSFT]

Hello @mbice, Thanks for flagging this. Although imageSrc and selectedImageSrc are defined in the ITopActionsDropdownOption interface, we couldn’t find any evidence they are currently supported in rendering logic. Please share a minimal repro, and we’ll raise this with engineering as a suspected bug.