Ons-icon is not displayed in Google Chrome

  • I’m testing ons-icon with Onsen UI v2.0.5 and AngularJS v1.6.1 but it does not work.


    <!doctype html>
    <html lang="en" ng-app="my-app">
        <meta charset="utf-8">
        <!-- CSS -->
        <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css"/>
        <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css"/>
        <ons-navigator var="navegador" page="home.html">
        <ons-template id="home.html">
        <ons-page ng-controller="MainController">
                    <div class="left">
                        <ons-icon icon="{{iconlist}}"></ons-icon>
                    <div class="center">
                        <span class="list__item__title">Eggs</span>
                        <span class="list__item__subtitle">Monday</span>
                    <div class="right">
                        20 €
        <!-- JS -->
        <script src="node_modules/angular/angular.min.js"></script>
        <script src="node_modules/onsenui/js/onsenui.js"></script>
        <script src="node_modules/onsenui/js/angular-onsenui.js"></script>
        <script type="text/javascript">
            var app = angular.module('my-app', ['onsen']);
                $scope.iconlist = "md-shopping-cart";

    Google Chrome Version 56.0.2924.87 (64-bit):
    0_1486270835597_Screen Shot 2017-02-05 at 06.00.09.png

    Google Chrome Inspector:
    0_1486271435607_Screen Shot 2017-02-05 at 06.10.03.png

    Mozilla Firefox Version 51.0.1 (64-bit):
    0_1486270911213_Screen Shot 2017-02-05 at 06.01.39.png

    Mozilla Firefox Inspector:
    0_1486271098713_Screen Shot 2017-02-05 at 06.04.21.png

    Why is this happen?

    Thank you!

  • Onsen UI

    @anderson Looks like something changed recently in Chrome and broke something related to ons-template. Try to put your scripts in the HEAD instead of BODY and I believe it will work.

  • @Fran-Diox It works! Thank you!

Log in to reply