I want to use an custom icon in my Angular/Nebular project as a nb-action button

I want

I want to use an custom icon in my Angular/Nebular project like this:

<nb-actions>
    <!-- works -->
    <nb-action link="/Home" icon="home-outline"></nb-action>
    <!-- does not work but i want it to -->
    <nb-action link="/MyPage" svgIcon="myIcon" pack="custom"></nb-action>
</nb-actions>

As described in the documentation here
https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack
I added this code to my project:

// myComponent.component.ts 
constructor(private nbIconLib: NbIconLibraries){
    this.nbIconLib.registerSvgPack("custom",
        {"myIcon":"./assets/icons/myIcon.svg"}
    )}

 // myComponent.module.ts
imports: [
    ...
    NbIconModule
]

Desired behavior:

Display a button with my costom svg icon

I need either the nbIconLibrary.register-Method to work or make the image solution below clickable

Actual behavior:

nb-action takes up space, displays no icon and is not clickable

I tried:

Different approaches with Angular Materials

<nb-actions>
    <nb-action link="/Home" title="Home">
        <mat-icon svgIcon="myIcon"></mat-icon>
    </nb-action>
</nb-actions>

Directly displaying the image

<nb-actions>
    <nb-action link="/Home" title="Home">
        <img src='./assets/icons/myIcon.svg' width="24px"/>
    </nb-action>
</nb-actions>

Both display the icon but it is not clickable in each case

different ways of registering the icon with nbIconLib like here: https://github.com/akveo/nebular/issues/2245

this.nbIconLib.registerSvgPack("custom", 
    {"myIcon": "<img src='./assets/icons/myIcon.svg' width='25px'/>"}
)

This does not change behavior

relevant dependencies

    "@angular/animations": "~13.3.0",
    "@angular/cdk": "^13.3.1",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/material": "^13.3.1",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@nebular/eva-icons": "^9.0.1",
    "@nebular/theme": "^9.0.1"

CodePudding user response：

I got the desired behavior by adding my icon to a preexisting and preconfigured icon pack that is available in nebular. Here is my code:

this.nbIconLib.getPack("eva").icons.set(
  "myIcon", "<img src='./assets/icons/myIcon.svg' width='25px'/>"
)

I still don't know why the approach from the documentation does not work.