angular material 和 md-icon 指令

Question

我有几个关于 md-icon 指令的问题（来自 angular-material）。这是显示我的问题的代码：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 .现在 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 我在下面的 GitHub too.So 上找到 link 我用示例定义了那些 class。

现在要对齐元素，您可以使用 layout-align="start center 它会将所有元素在垂直方向居中对齐。检查 offical doc 以获得其他很酷的选项。因此，请检查下面的内容 link，如果有任何遗漏请告诉我。

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

有一点要记住，因为您使用的是 material-design，所以您的所有尺寸都应该是 8 的倍数。因此，如果可能，尽量不要使用 36px 类型的值。

angular material 和 md-icon 指令

angular material and md-icon directives

css

icons

angular-material