Ion-icon inside component used in ion-item


Hi Guys,

i working hard to port my v1 app to v2. Some issue here, reported bug there and some other new stuff confusing me… but for short i lovin it!

I wrote a house automation ui where all the styles comes from the server. You can configure any device on the server as switch, label, range, colorpicker and so one. Short overview:

home-device.component / Template:
<home-device-header [device]=“device”></home-device-header>
<home-device-control [device]=“device”></home-device-control>

home-device-control / Template:

<home-device-control-label-value-list [device]=“device” *ngIf=“device.compiled.LABEL_VALUE_LIST”></home-device-control-label-value-list>
<home-device-control-radio-button-list [device]=“device” *ngIf=“device.compiled.RADIO_BUTTON_LIST”></home-device-control-radio-button-list>
<home-device-control-range [device]=“device” *ngIf=“device.compiled.RANGE”></home-device-control-range>
<home-device-control-switch [device]=“device” *ngIf=“device.compiled.SWITCH”></home-device-control-switch>

home-device-control-label-value-list / Template:
<ion-item *ngFor=“let index of device.compiled.parameter.list | count”>
<home-device-icon [icon]=“device.compiled.icon.resolve(index)”></home-device-icon>
<ion-note item-right>{{device.compiled.get.resolve(index)}}</ion-note>

home-device-icon / Template:
<ion-icon [name|=“icon”></ion-icon>

The Icon inside the component is not displayed while the component used inside ion-item. I think its caused by also rendering the selector element : “ion-item > home-device-icon > ion-icon” instead of “ion-item > ion-icon”. But in my case, i really need the home-device-icon. It manages some attributes, icon-sized depending on my icon expression and other icon-fonts such as ionicon inside the ion-icon.

How should i solve this issue ? In v1 i used the “replace” attribute in directives to solve this (i’m not sure this was an issue on the css style in v1…) I know about many solved this by passing it as attribute. In this case i don’t see any solution this works me…

How should i fix this?


Give the <home-device-icon> an attribute of item-left, item-content, or item-right, depending on how you want it to display.


Thats it! Thank you!