[Actions] issue with NbAction when using Fontawesome icons

[sukeshlaghate]

Issue type

I'm submitting a ...

• [x] bug report
• [ ] feature request

Issue description

NbAction with icons that change dynamically (for example to indicate toggle state) works fine when using Nebular icons, however when using Fontawesome icons it misbehaves.

Current behavior: using Fontawesome icons seems to freeze icon to its initial value. In my case for toggle action to chevron-circle-down (as mentioned in code example further in description). Debugging revealed following:

<nb-action _ngcontent-c15="" ng-reflect-icon="fas fa-chevron-circle-up">
<!--bindings={
  "ng-reflect-ng-if": "fas fa-chevron-circle-up",
  "ng-reflect-ng-if-else": "[object Object]"
}-->
<a class="icon-container ng-star-inserted" href="#">
<svg class="svg-inline--fa fa-chevron-circle-down fa-w-16 control-icon" aria-hidden="true" data-prefix="fas" data-icon="chevron-circle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z"></path></svg>
<!-- <i class="control-icon fas fa-chevron-circle-down"></i> -->
</a>
<!----><!--bindings={}-->
</nb-action>

Which shows that icon is getting correctly set to fas fa-chevron-circle-up when card is toggled to expanded state. However, instead of line <i class="control-icon fas fa-chevron-circle-up"></i> it shows svg for "chevron circle down"

Expected behavior: When icon of action is changed it should show changed icon in UI.

Steps to reproduce: Take NbCard and add NbAction with fontawesome icon. in click operation try changing icon for this action. Icon seems to be frozen to its initial value.

Related code: Consider example illustrated in code below: HTML template:

<nb-card [size]="cardSize" [nbSpinner]="loading" nbSpinnerStatus="danger" nbSpinnerSize="xlarge">
  <nb-card-header>
    <!--Header content-->
     <div class='row'>
     <nb-actions size="small">
        <nb-action [icon]="cardIcon" (click)="toggleCard()"></nb-action>
      </nb-actions>
    </div>
  </nb-card-header>
  <nb-card-body *ngIf="!collapsed">
    <!--Card body content-->
 </nb-card-body>
</nb-card>

component.ts:

export class SomeComponent implements OnInit {
   // initial state is collapsed card hiding details.
  @Input() collapsed: boolean = true;
   loading:boolean = false;
   // Using 'nb-chevron-down'; works as expected
   cardIcon: string =  'fas fa-chevron-circle-down';

  //initial card size is extra small when user toggles, card size is changed to medium to show details
  cardSize: string = 'xxsmall';
  
// other class methods

  toggleCard(): void {
    this.collapsed = !this.collapsed;
    // using nb-chevron-down/up works as expected 
    // this.cardIcon = (this.cardIcon === 'nb-chevron-down') ? 'nb-chevron-up' : 'nb-chevron-down';

this.cardIcon = (this.cardIcon === 'fas fa-chevron-circle-down') ? 'fas fa-chevron-circle-up' : 'fas fa-chevron- circle-down';  

  // correct Fontawesome icon string is shown in console however icon does not change in UI.
    console.log(this.cardIcon);

//card size changes correctly based on toggle state i.e. clicking nbaction when card is in expanded mode changes card size to extra small
    this.cardSize = (this.cardSize === "xxsmall") ? "medium" : "xxsmall";
   }
}

Other information:

npm, node, OS, Browser

Node: 8.1.3
NPM: 5.6.0
OS: Windows 10
Browser: Chrome, Firefox

Angular, Nebular

Angular: 6.1.6
Nebular: 2.0.2

[Tibing]

Hi @sukeshlaghate, I've checked your example and it works properly. Could you please provide reproducibly stackblitz?

[sukeshlaghate]

Hi @Tibing,

Sure will create a stackblitz. I am currently short on time, will do so over weekend. Appreciate your patience and help.

regards Sukesh

[sukeshlaghate]

Hi @Tibing,

I tried creating stackblitz. However i ran into tangential issues. :(

I am not able to figure out how to apply nebular theme. when I tried to add default theme ("node_modules/@nebular/theme/styles/prebuilt/default.scss") to styles tag in angular.json, stackblitz threw error.

Error in turbo_modules/@nebular/[email protected]/styles/prebuilt/default.scss
Error: ENOENT: No such file or directory., '/dev/null'

Here is the link to my stackblitz

Request you to share a minimal template that has nebular theme working.

@nnixaa In General It would be good idea to share a link to Stackblitz template that has barebones working default nebular theme applied so that users like me who are not conversant with Stackblitz would be able to have a faster turn around time to respond with examples to be reported.

Once again appreciate your patience and help.

With regards Sukesh.

[nnixaa]

Hi @sukeshlaghate, great suggestion, here you go https://stackblitz.com/github/akveo/nebular-seed.

[GiKyouGetsu]

so far the nb-action component does not support the pack properties in the nb-icon?