Ons-icon is not displayed in Google Chrome

anderson

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!

Fran Diox

@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.

anderson

@Fran-Diox It works! Thank you!

Ons-icon is not displayed in Google Chrome browsing