Google fonts' Multi-name icon on cordova renders two different icons

Question

I am converting a web application into a working hybrid mobile app through cordova. I'm using Google's material icons set and each multi-name icon (i.e. photo_camera) is translated in two different icons. This weird problem only occurs on cordova.

The Code:

Result:

Any idea?

score 0 · Answer 1 · answered Dec 22 '16 at 13:15

i think your calling it wrongly.....when i try with your code i got proper icon like below

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <p>first</p>
      <i class="material-icons ">photo_camera</i>
 <p>second</p>
<i class="material-icons ">photocamera</i>
  </body>
<script>
        var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
</script>
</html>

In second case i tried in many ways by missing something in that photo_camera then i got as you mentioned everytime

Google fonts' Multi-name icon on cordova renders two different icons

1 Answers1