角度材料和 md-icon 指令答案

【问题标题】：angular material and md-icon directives角度材料和 md-icon 指令
【发布时间】：2016-03-22 17:12:52
【问题描述】：

我对 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 设置图标的大小并在之后手动设置边距？是否有根据图标大小自动设置边距的解决方案？
如何将我的文本与图标对齐？

提前致谢

【问题讨论】：

标签： css icons angular-material

【解决方案1】：

有些事情我需要澄清。对于您的第一个问题，您不需要使用!important，如果您想要指定边距，则只能以这种方式使用指定边距，否则在容器上使用layout-margin 属性或填充使用layout-padding。现在offical documentation 表示我们可以使用font-icon 大小为24px 32px 40px 48px 通过使用md-24 md-32 md-32 和md-48 调用md-48 和md-48 337@337@98654这节课。但实际上我无法使用它，因此您必须在您的 css 文件中手动指定。我也在 GitHub 上找到了一个 issue。所以在下面的链接中，我用示例定义了这些类。

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

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

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

【讨论】：