[Actions] issue with NbAction when using Fontawesome icons
- Linguagem predominante
- TypeScript
- Estrelas
- 8.1k
- Forks
- 1.5k
- Métricas de merge de PRs
- Nenhum PR com merge em 30d
Descrição
### 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:
```
```
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
` ` 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:
```
```
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
```
Guia de contribuição
Avaliação
Esta issue ainda não foi avaliada.