md-icon (webfont) not correctly aligned in md-button

[jgoux]

Hi,
the md-icon isn't correctly aligned in the various md-button.
Example : http://codepen.io/jgx/pen/qdEQYK
Maybe I'm missing extra CSS rules ? But I assumes there should be a default size which works.

[ThomasBurleson]

By default, Angular Material has:

.md-button.md-fab {
   width : 5.6rem;
   height: 5.6rem;
}

md-icon {
   width : 24px;
   height: 24px;
}

Your .wi class is affecting the positioning:

.wi {
  font-size: 2.5rem;
  display:inline-block;
}

These changes will solve your issues.:

.wi {
  font-size: 2.8rem;
  display: block;
}

md-icon {
  width : 2.8rem;
  height: 2.8rem;  
}

[ThomasBurleson]

@marcysutton - Should we change md-icon to use:

.md-button.md-fab {
   width : 5.6rem;
   height: 5.6rem;
}

md-icon {
  width : 2.8rem;
  height: 2.8rem;  

 &.[md-font-icon] {
    display : block;
 }
}

Also should the

[marcysutton]

Those weather icons come with their own styles that conflict with mdButton. Without using !important, it's impossible to override the display: inline-block CSS declaration that comes with those icons. On top of that, the font size, height and width noted above are dependent on that particular set of icons. I actually don't think we can make these changes to mdButton/mdFab, but they can be made in your custom CSS.

[ThomasBurleson]

It is fixed for me. However the icon isn't vertically centered in an md-toolbar

<md-input-container md-no-float class="navbar-search">
    <md-icon md-svg-icon="ic_search_24px"></md-icon>
    <input class="search-input" type="text" 
           placeholder="Search"
           ng-model="search.text" 
           ng-model-options="{ debounce: 700 }"
           ng-blur="inputBlur()"
           ng-focus="inputFocus()">
</md-input-container>

[ghost]

@ThomasBurleson

I agree, md-icon should use rem.

I'll try to prep a plunkr soon (right now it's giving me 504's).

md-input-container > md-icon {
  position: absolute;
  top: 5px;

It's the top:5px when you have no label and padding: 0. Using the material icons svg.

<md-input-container md-no-float="" style="
    padding: 0;
">
    <md-icon md-svg-icon="ic_search_24px" ></md-icon>
    <input type="text" placeholder="Search">
</md-input-container>

[ghost]

@ThomasBurleson See if you can reproduce, I'll try to get a plunkr if you can't repro using that.

[ThomasBurleson]

@robertbaker - Here is the CodePen
When you use an icon inside an md-input-container here is the styling:

md-input-container>md-icon {
  position: absolute;
  top: 5px;
  left: 2px;
}

Since this icon is absolutely positioned, you will have to adjust to your own needs with CSS adjustments.

[ghost]

@ThomasBurleson Although I get top: 5px, not 2px, even in your codepen. 2px it looks fine, but not getting that.

Unless you mean that I should adjust it to 2px myself. In that case it's better to use padding:2px instead of 0, then the 5px is fine.

[ThomasBurleson]

@robertbaker - yes. I meant that you should adjust yourself on each need-by-need basis.

[marcysutton]

Please note that Angular Material no longer uses rem units to minimize global default styles, so you must use pixels for the time being.

[pencilcheck]

Hmm, this seems to work for me:

Written in stylus:

md-icon
  .material-icons
    display block !important

[mixomat]

Fix from @pencilcheck worked for me.

[felipekm]

Thanks @pencilcheck
But I'm still facing problems with .active, here what's happening when I'm pressing it on:

Thoughts?

[kwiesmueller]

I had a similar problem yesterday, setting the line-height for the material-icons to be inherited fixed it for me.
.material-icons { line-height: inherit !important; }
It seams that originally this is being set to 1, which messed my buttons up.

[agnjunio]

This particullary happens in md-fab-speed-dial so I made my fix like this:

md-fab-speed-dial
    md-icon.material-icons
        line-height: $button-fab-line-height !important

$button-fab-line-height or inherit provide the same result if your scss knows the variable