Material: md-icon sizing not working

[langley-agm]

Documentation says in order to size an icon to 48px you have to apply the following class:
md-48
It never says you have to write that class yourself, and the proposed implementation of the class (which is not mentioned in https://material.angularjs.org/ ) doesn't work. Instead of:
.material-icons.md-48 { font-size: 48px; }
you need to add something like:
.material-icons.md-48 { font-size: 48px; height: 48px; width: 48px; }
otherwise it'll overlap other components.

[ThomasBurleson]

Please see our online demo Font Icons With Ligatures; which uses Material icons and styles. If you open the CSS sheet, you will see:

.material-icons.md-18 {
  font-size: 18px; }
.material-icons.md-24 {
  font-size: 24px; }
.material-icons.md-36 {
  font-size: 36px; }
.material-icons.md-48 {
  font-size: 48px; }
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light {
  color: white; }
.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3); }

Also Google's Material Icons Developer Guide details all this.

[langley-agm]

Here is the same example where it isn't working by applying the class manually, instead of through the model:
http://codepen.io/langley/pen/KpBgby

And here is an example of how the image of the icon grows but not the md-icon element:

http://codepen.io/langley/pen/VLBKgZ

[ThomasBurleson]

you are using ng-class="md-48" instead of ng-class="it.size".

[langley-agm]

That's what I meant by applying the class manually instead of through the model.
Why would the model /controller have the responsibility to choose the size of an icon? it might be a cool feature in some scenarios but not the only way to do it. Using class="md-48" doesn't work either. Only way it can work is with ng-class="'md-48'" to me is more a workaround than a real solution but I can live with it.

However that doesn't solve the second issue, the second example its doing it that way (it.size) but it overlaps with other components as like I said, it changes the font-size of the icon but doesn't re-size the md-icon component itself.

[langley-agm]

In this page:
https://material.angularjs.org/latest/#/api/material.components.icon/directive/mdIcon
the class gets set directly, not through the model:
face

[langley-agm]

Nevermind about the first issue, class="md-48" does work, I was using two times the class property.
The only issue I see now is the component md-icon component not resizing.

[eniniz]

+1

[wboevink]

+1
The icon font can be sized but the md-icon component still stays at 24px width and height,

[gtzinos]

+1 reopen this issue

[gtzinos]

Guys this is a workaround:

.material-icons.md-18 {
font-size: 18px !important;
height: 18px !important;
width: 18px !important;
}
.material-icons.md-24 {
font-size: 24px !important;
height: 24px !important;
width: 24px !important;
}
.material-icons.md-36 {
font-size: 36px !important;
height: 36px !important;
width: 36px !important;
}
.material-icons.md-48 {
font-size: 48px !important;
height: 48px !important;
width: 48px !important;
}

[Corsseir]

This is now a solution for button icon. Jeees... This Angular Material is so buggy.