ons-icon in ng-repeat (Angular 1)

  • hi,

    I’ve just run into an issue with icons inside an ng-repeat where the icon is set from an angular expression. e.g. <ons-icon icon="{{ … }}">. This codepen is a simple repro: https://codepen.io/jimmo/pen/kkvzvm

    Each row should have a chevron, custom icon and a description. The custom icons are missing.

    The underlying problem here is that ons-icon sets it’s class based on the value of “icon”. The element is initially created with “icon” set to the literal string “{{x.icon}}”. So it has an initial class name of “ons-icon fa fa-{{x.icon}}” (which angular of course binds to x.icon).

    So Angular subsequently comes along and sets “icon” to the real value of x.icon, which results in class name being set correctly to “ons-icon zmdi zmdi-flash” but immediately overwritten by “ons-icon fa fa-md-flash” based on interpolation of the previous class name.

    I’m not really sure if this is an angular bug (https://docs.angularjs.org/guide/interpolation#known-issues would suggest working-as-intended) but not sure how ons-icon could work around this (perhaps strip out any templating before assigning this.classList?).

    Alternatively, if anyone can suggest a workaround that’d be great too :smile: Edit: I have a workaround - set an empty class on ons-icon: e.g. <ons-icon class="" icon="{{x.icon}}">.


Log in to reply