Toggle wall Icon not showing in I Twin viewer.

[IS1992]

i trying to get icon in viewer, but its not working.

import { IModelApp } from "@itwin/core-frontend";
import { UiItemsProvider, ToolbarUsage, ToolbarOrientation, CommonToolbarItem, StageUsage, ToolbarItemUtilities, StagePanelLocation, AbstractWidgetProps, StagePanelSection} from "@bentley/ui-abstract";
import { Visualization } from "../Visualization";
import{ SmartDeviceListWidgetComponent } from "../Components/widgets/SmartDeviceListWidgetsComponent";

export class SmartDeviceUiItemsProvider implements UiItemsProvider {
public readonly id = "SmartDeviceUiProvider";
private _toggleWalls: boolean = false;

public provideToolbarButtonItems(stageId: string, stageUsage: string, toolbarUsage: ToolbarUsage, toolbarOrientation: ToolbarOrientation) : CommonToolbarItem[] {
const toolbarButtonItems: CommonToolbarItem[] = [];

if (stageUsage === StageUsage.General && toolbarUsage === ToolbarUsage.ContentManipulation && toolbarOrientation === ToolbarOrientation.Vertical) {

  const toggleWallsButton = ToolbarItemUtilities.createActionButton(
    "ToggleWalls",
    3000,
    "icon-Element",
    "Toggle Walls Tool",
    () => {

      this._toggleWalls =! this._toggleWalls;
      Visualization.hideHouseExterior(IModelApp.viewManager.selectedView!, this._toggleWalls);

    }
  );

  toolbarButtonItems.push(toggleWallsButton);

}

return toolbarButtonItems;

}

[NancyMcCallB]

Thanks for your question!

Beginning with the 4.0 release, the AppUI packages no longer have a dependency on the webfont icons. (https://github.com/iTwin/appui/blob/master/docs/changehistory/4.0.0.md#bentleyicons-generic-webfont)

You can either include the webfont dependency in your application, or include the @bentley/icons-generic package and import the SVG directly, e.g.,

import elementSvg from "@bentley/icons-generic/icons/element.svg";

const elementIconSpec = IconSpecUtilities.createWebComponentIconSpec(layoutRestoreIconSvg);

const toggleWallsButton = ToolbarItemUtilities.createActionButton(
"ToggleWalls",
3000,
elementIconSpec,
"Toggle Walls Tool",
() => {

  this._toggleWalls =! this._toggleWalls;
  Visualization.hideHouseExterior(IModelApp.viewManager.selectedView!, this._toggleWalls);

}

);

Let me know if you have trouble!

Thanks,
Nancy McCall