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!

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 is not displayed in Google Chrome