角度材料とmd-iconディレクティブ

Question

md-iconディレクティブ（角材料から）にはいくつか問題があります。ここ は私の問題を示したコードです：ここではhttp://codepen.io/anon/pen/bpWNWr

は、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> 

CSS

.stars { 
    font-size: 36px !important; 
    margin-right: 12px; 
} 

.noselect { 
    outline: none; 
} 

と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; 
}); 

このコードでは、いくつかの問題：

• アイコンのサイズを!importantに設定して後で手動でマージンを設定するのはなぜですか？アイコンのサイズに応じて自動的にマージンを設定するソリューションはありますか？

• どのようにアイコンとテキストを整列できますか？

おかげで、事前に

Answer 1

は私がクリアする必要がありますいくつかのものがあります。あなたの1番目の質問については、!importantを使用する必要はありません。余白を指定する場合は、余白を指定するだけです。それ以外の場合はlayout-margin属性をコンテナに使用するか、パディング用にlayout-paddingを使用してください。今offical documentationは、私たちがmaterial-iconsこのクラスの助けを借りてmd-24md-32md-40とmd-48呼び出しを使用してサイズ24px32px40px48pxのfont-iconを使用することができると述べています。しかし、実際には私はそれを使用することができないので、手動であなたのCSSファイルで指定する必要があります。私はGitHubで見つけたissueもあります。下のリンクでは、例を使ってこれらのクラスを定義しました。

要素を揃えるために、layout-align="start centerを使用すると、中央のすべての要素が垂直方向に揃えられます。その他のクールなオプションについてはoffical docをお試しください。だから、以下のリンクをチェックして、欠けているものがあれば教えてください。あなたがmaterial-designを使用しているので、可能性は値の36px種類を使用しないようにしようとした場合、すべてのdimentationsだから8の倍数でなければならないと覚えて

http://codepen.io/next1/pen/GZmJRM

一つ。