Angular SVG with Icon Registry

GoJS
1

I’m currently facing the problem of integrating SVG’s dynamically in GoJS.

In my case, there are the normal Angular Material Icons and Icons from the Angular Icon Registry. Normally, a component takes care of handling the SVG or Material Icon decisions.

I was trying to use the SVG to geometry function, like in the samples: SVG Tiger Drawing in GoJS with no success.

Also using GoJS.Picture’s ‘element’ prop with a dynamic created Angular Component (Normal SVG Component) was not working.

      new Panel(Panel.Horizontal, {})
        .add(
          new Picture({
            source: 'src/assets/icons/test.svg',
          }),
        )
        .add(
          new Picture({ width: 35, height: 35 }).bind('element', '', () => {
            const componentRef =
              this.iconViewContainer!.createComponent(SystemsIconComponent);

            componentRef.instance.icon = 'something.icon';

            console.log(componentRef.location.nativeElement);

            return componentRef.location.nativeElement;
            // return compRef.location.nativeElement;
          }),
        )

Any hint how I can load the images from the Angular Icon Registry?

Thanks in advance

2

Yes, you should use a Picture.

Is what is returned by that conversion function an instance of an HTMLImageElement?

Can you just get a URL? If so, bind the Picture.source property to the URL.