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.

    Code:

    <!doctype html>
    <html lang="en" ng-app="my-app">
    <head>
        <title>App</title>
        <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"/>
    
    </head>
    <body>
        <ons-navigator var="navegador" page="home.html">
        </ons-navigator>
    
        <ons-template id="home.html">
        <ons-page ng-controller="MainController">
            <ons-list>
                <ons-list-item>
                    <div class="left">
                        <ons-icon icon="{{iconlist}}"></ons-icon>
                    </div>
                    <div class="center">
                        <span class="list__item__title">Eggs</span>
                        <span class="list__item__subtitle">Monday</span>
                    </div>
                    <div class="right">
                        20 €
                    </div>
                </ons-list-item>
            </ons-list>
        </ons-page>
        </ons-template>
    
        <!-- 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']);
    
            app.controller('MainController',function($scope){
                $scope.iconlist = "md-shopping-cart";
    
            });
        </script>
    
    </body>
    </html>
    

    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