CODEWITHSUNDEEP
cssmaterial-designangular-material
hmota
hmota

Reputation: 388

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

My question is why this elements are not separate as is suppose to be with some margin from left and right. And what if I want to see this elements in a mobile, it will be a mess. So what I missing here in order to separate the elements correctly and don't get mix together .?

Note: Hey here is the following code that I have and after the code click on the link to see image.

<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

Upvotes: 0

Views: 499

Answers (1)

camden_kid
camden_kid

Reputation: 12813

I think it is because you have class="md-secondary" on the second md-icon. If you remove it (or replace it with class="md-hue-1" as the other md-icon) it works fine - CodePen

Markup

<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>[email protected]</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>

Upvotes: 1

Related Questions