Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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:

    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 ( 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}}">.