如何分隔标签<md-list-item>内的图标？

Question

我的问题是，为什么这些元素没有像预期的那样分开，左右有一些边距。如果我想在手机中看到这些元素怎么办，那将是一团糟。那么我在这里缺少什么才能正确分离元素并且不要混合在一起。？

注意：嘿，这是我的以下代码，在代码后单击 link 查看图像。

<md-list-item layout="row">
          <img  ng-src="assets/img/iconUser.png" class="md-avatar" alt="none"/>
          <p flex ng-bind="c.username"></p>
          <p flex ng-bind="c.email"></p>

          <md-button flex class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Add Contact">
           <md-icon class="md-hue-1" md-svg-icon="assets/img/plus1.svg"  
           aria-label="Add Contact">
           </md-icon>
          </md-button>

          <md-button flex class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Send Email">
           <md-icon md-svg-icon="assets/img/message.svg"  
           aria-label="Send Email" 
           class="md-secondary" >
           </md-icon>
          </md-button>

        </md-list-item>

this is the picture of the md-list-item

Answer 1

我认为这是因为你在第二个 md-icon 上有 class="md-secondary"。如果你删除它（或用 class="md-hue-1" 替换它作为另一个 md-icon）它工作正常 - CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-list-item layout="row">
    <img  ng-src="assets/img/iconUser.png" class="md-avatar" alt="none"/>
    <p flex>John</p>
    <p flex>john.smith@gmail.com</p>

    <md-button class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Add Contact">
      <md-icon class="md-hue-1"  md-svg-src="img/icons/cake.svg" aria-label="Add Contact"></md-icon>
    </md-button>
    <md-button class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Send Email">
      <md-icon class="md-hue-1" md-svg-src="img/icons/android.svg" aria-label="Send Email"></md-icon>
    </md-button>

  </md-list-item>
</div>

如何分隔标签<md-list-item>内的图标？

How to separate icons inside of the tag <md-list-item>?

css

material-design

angular-material