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>