角度材质和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

我需要清除一些事项。 对于您的第一个问题，您不需要使用!important ，如果您想要指定边距，则只能以这种方式使用指定边距，否则在容器上使用layout-margin属性，或者使用layout-padding 。 现在官方文档说我们可以使用尺寸为24px 32px 40px 48px的font-icon ，使用md-24 md-32 md-40和md-48调用这个类的material-icons 。 但实际上我无法使用它，因此您必须在css文件中手动指定。 我在GitHub上也发现了一个问题。所以我在下面的链接中用示例定义了这些类。

现在要对齐你的元素你可以使用layout-align="start center它会将所有元素排列在垂直方向的中心。为其他很酷的选项打开官方文档 。所以只需查看下面的链接，让我知道是否有任何遗漏。

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

要记住的一件事是，由于您使用的是material-design所有尺寸都应该是8的倍数。因此，如果可能的话，请尽量不要使用36px的值。