RadListView and iconfonts


#1

I can’t get the iconfont icons to show in the list, just the text &#xe901, &#xe902…?

What am I doing wrong?

app.css

.myicons {
	font-family: 'myicons';
	font-size: 24;
}

mycomponent.component.html

<GridLayout tkExampleTitle tkToggleNavButton>
  <RadListView [items]="menuItems">  
    <ng-template tkListItemTemplate let-item="item">
      <StackLayout orientation="vertical">
        <!-- this dosen't work -->
        <Label horizontalAlignment="center" [text]="item.icon" class="menu-item-icon myicons"></Label>
        <!-- this works -->
        <Label horizontalAlignment="center" text="&#xe920;" class="menu-item-icon myicons"></Label>
        <Label horizontalAlignment="center" [text]="item.title"></Label>
      </StackLayout>
    </ng-template>
    <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="3"></ListViewStaggeredLayout>
  </RadListView>
</GridLayout>

mycomponent.component.ts

export class MenuGridComponent implements OnInit {

	menu: any[] = [];

	constructor(private menuService: MenuService) {}

	get menuItems(): any[] {
		return this.menu;
	}

	ngOnInit(): void {
		this.getMenu();
	}

	getMenu() {
		this.menuService.getMenu().then((menu) => {
			this.menu = menu;
		}).catch((error) => {
			console.log(error);
		});
	}

}

menu.service.ts

export class MenuService {
  
  private menu: Array<any>;

  constructor(){
    this.menu = [
      {id: 1, title: 'Item 1', icon: '&#xe920;'},
      {id: 2, title: 'Item 2', icon: '&#xe92c;'},
      {id: 3, title: 'Item 3', icon: '&#xe910;'},
      {id: 4, title: 'Item 4', icon: '&#xe905;'},
      {id: 5, title: 'Item 5', icon: '&#xe901;'},
      {id: 6, title: 'Item 6', icon: '&#xe92b;'},
      {id: 7, title: 'Item 7', icon: '&#xe92d;'},
      {id: 8, title: 'Item 8', icon: '&#xe921;'},
      {id: 9, title: 'Item 9', icon: '&#xe923;'},
      {id: 10, title: 'Item 10', icon: '&#xe924;'},
      {id: 11, title: 'Item 11', icon: '&#xe91c;'},
      {id: 12, title: 'Item 12', icon: '&#xe922;'},
      {id: 13, title: 'Item 13', icon: '&#xe92e;'},
      {id: 14, title: 'Item 14', icon: '&#xe91b;'},
      {id: 15, title: 'Item 14', icon: '&#xe91d;'},
      {id: 16, title: 'Item 16', icon: '&#xe91e;'}
    ];
  }

  getMenu(): Promise<any> {
    return new Promise<any>((resolve, reject) => {
      setTimeout(() => {
        if (this.menu.length > 0) {
          resolve(this.menu);
        } else {
          reject('Empty array');
        }
      }, 2000);
    }).catch((error) => {
      console.log(error);
    });
  }

}

Result

-------------------------------------
&#xe920; | &#xe92c; | &#xe910;
-------------------------------------
&#xe905; | &#xe901; | .....
-------------------------------------