angular material and md-icon directives - css

Question

I've several issues with the md-icon directive (from angular-material).
Here is the code which shows my problems : http://codepen.io/anon/pen/bpWNWr
Here is the important part of the HTML :
<div ng-controller="MyController">
<div layout="row">
<span class="noselect" ng-repeat="rates in rating track by $index" >
<md-icon class="stars noselect" >
{{rates.icon}}
</md-icon>
</span>
{{rate}}
</div>
</div>
the css
.stars {
font-size: 36px !important;
margin-right: 12px;
}
.noselect {
outline: none;
}
and the js :
var myApp = angular.module('MyApp', ['ngMaterial']);
myApp.controller('MyController', function($scope) {
$scope.rating = [];
$scope.rating.push({icon: "star"});
$scope.rating.push({icon: "star"});
$scope.rating.push({icon: "star_half"});
$scope.rating.push({icon: "star_border"});
$scope.rating.push({icon: "star_border"});
$scope.rate = 2.5;
});
So in this code, some problems :
Why have I to set the size of the icon with !important and set the margin manually after ? Is there a solution to set the margin automatically depending of the size of the icon ?
How can an align my text with the icons ?
Thanks in advance

Answer 1

There are some things I need to clear. For your 1st question you don't need to use !important and if you want a specify margin then only use specify margin in that way otherwise use layout-margin attribute on container or for padding use layout-padding. Now the offical documentation says that we can use font-icon of size 24px 32px 40px 48px by using md-24 md-32 md-40 and md-48 calls with the help of material-icons this class. But in reality I am not able to use it so you have to manually specify in your css file. There is an issue I found on GitHub too.So in the below link I defined those class with the example.
Now to align you elements you can use layout-align="start center it will align all elements in center in vertical direction. Cheke the offical doc for other cool options. So just check the below link and let me know if anything is missing.
http://codepen.io/next1/pen/GZmJRM
One thing to remember as since you are using material-design all your dimentations should be a multiple of 8. So if possible try not to use 36px kind of value.