Is there a way to place an icon inside a nb-option? I have readed the docs and can't find a way to do this. May be with ng-template?
Asked
Active
Viewed 841 times
1 Answers
0
You can place image inside nb-option like below. Code also in stackblitz=>
HTML:
<nb-layout>
<nb-layout-column>
<nb-select [(selected)]="selectedOption">
<nb-option *ngFor="let o of options" [value]="o">
<div>
<img style="width:50px;height:50px" src="https://i.ibb.co/sm8s569/2.jpg" alt="2" border="0">
{{ o.name }}
</div>
</nb-option>
</nb-select>
</nb-layout-column>
</nb-layout>
TS:
export class AppComponent {
options = [
{ value: 1, name: '1' },
{ value: 2, name: '2' },
{ value: 3, name: '3' },
];
selectedOption;
constructor() {
this.selectedOption = this.options[1];
}
}

Srijon Chakraborty
- 2,007
- 2
- 7
- 20
-
It worked fine with an img tag. Did not worked for me with an nbicon instead, neither with a fontawsome icon.
{{ option }} – Carlos López Durañona Feb 15 '21 at 14:26