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
-
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!