Custom toolbar button

[ovaisa]

I am using svg files to add custom buttons to my toolbars. These were working well until recently, but these icons are no longer showing in the toolbar (blank button is displayed). I am not sure where I got the code to define the svg file as icon (possibly from a Bentley sample), seemed to work until now.

I am using 3.5.3 and these were working in my earlier builds on the same version (and earlier versions). Not sure what I did that caused this. A sample code below. Any advice on what might be causing this would be appreciated.

Thanks,

OvaisA

import { StageUsage, ToolbarOrientation, ToolbarUsage,  UiItemsProvider } from "@itwin/appui-abstract";
import { CommonToolbarItem, ToolbarItemUtilities } from "@itwin/appui-abstract";

export class myToolbar implements UiItemsProvider {
  public readonly id = "myToolbar";

  public provideToolbarButtonItems(
    _stageId: string,
    stageUsage: string,
    toolbarUsage: ToolbarUsage,
    toolbarOrientation: ToolbarOrientation
  ): CommonToolbarItem[] {

    if (
      stageUsage === StageUsage.General &&
      toolbarUsage === ToolbarUsage.ContentManipulation &&
      toolbarOrientation === ToolbarOrientation.Vertical
    ) {
      const homeToolbar: CommonToolbarItem[] = [
        ToolbarItemUtilities.createActionButton(
          "home",
          100,
          "svg:./home_logo_512.svg?sprite",
          "Home",
          () => {}
        ),
      ];
      return homeToolbar;
    }

  return [];
  }
}

[NancyMcCallB]

We have moved away from the sprite loader in 4.0, but it should still work in 3.5.3.

Still, you should be able to future-proof your code and fix this by doing something like:

import home_logo from "";
:
:
ToolbarItemUtilities.createActionButton(
"home",
100,
IconSpecUtilities.createWebComponentIconSpec(home_logo),
"Home",
:
:

Let me know if you have trouble with it.

Nancy

[ovaisa]

Thank you Nancy, it is working again! Much appreciate your quick response.