I have a problem with an icon svg
in angular-material
, when I load my page the icon loads correctly with the following code: <md-icon md-svg-icon="{{ aaa.stat }}" aria-label="Icons Status"></md-icon>
I am making use of the image by means of an object:
$scope.aaa = {
stat: "images/en-espera.svg"
}
As you can see in the image the icon is shown correctly, but when I go to the home and return to this view the icon seems to be placed a transparent background ...
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<title></title>
<!-- Jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Angular js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
</head>
<body>
<script>
var app = angular.module("myApp", ['ngMaterial']);
app.controller("myCtrl", function($scope) {
$scope.toggleSi = function() {
$scope.fax = !$scope.fax;
}
$scope.aaa = {
state: "images/en-espera.svg"
}
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<md-button class="md-raised|md-fab|md-mini" aria-label="description" ng-click="toggleSi()">MOSTRAR Y OCULTAR</md-button>
<md-content ng-if="fax">
Lorem ipsum dolor sit amet, ne quod novum mei
<md-icon md-svg-icon="{{ aaa.state }}" aria-label="Alarm Icon"></md-icon>
</md-content>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
</html>
This is what I have, I am using angular-material
, to replicate my error, copy and paste the code that you enter and place in your local a imagen.svg
within the object state