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):
Google Chrome Inspector:
Mozilla Firefox Version 51.0.1 (64-bit):
Mozilla Firefox Inspector:
Why is this happen?
Thank you!
-
@anderson Looks like something changed recently in Chrome and broke something related to
ons-template
. Try to put your scripts in theHEAD
instead ofBODY
and I believe it will work.
-
@Fran-Diox It works! Thank you!