Components: How to change md-icon size

[gtzinos]

Hello,

I use the class "md-24" on my md-icon but it doesn't work.

Here is a workaround but am i missing an official way ?

.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;
}

[donroyco]

As @jelbourn mentioned in #1891:

We would recommend people use css to size the icons.

[gtzinos]

Okay thank you.

[mackelito]

How can we do that on component basis?

:host {
  .mat-icon {
    width: 100px;
    height: 100px;
  }
}

This will not be applied.

[willshowell]

@mackelito I suspect you also need font-size

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  height: $size;
  width: $size;
}

.mat-icon {
  @include md-icon-size(16px);
}

[mackelito]

Tried it but it´s not working.
I suspect it has something to do with how :host works?

my setup is that I have a <logo> component that contains <md-icon svgIcon="logo"></md-icon>

[kara]

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[mackelito]

To continue: https://stackoverflow.com/questions/43887701/how-to-change-md-icon-size-in-material

[phamaimy]

change font-size of md-icon
Ex: font-size: 50px;
i have a problem the same, and that is my solution! :)

[naivefun]

try this scss:

$icon-small-container-size: 32px;
$icon-small-size: 16px;

.mat-icon-button.small {
  width: $icon-small-container-size;
  height: $icon-small-container-size;
  line-height: $icon-small-container-size;

  .mat-icon, .mat-icon-button i {
    line-height: $icon-small-size;
  }

  .mat-icon {
    width: $icon-small-size;
    height: $icon-small-size;
  }

  .material-icons {
    font-size: $icon-small-size;
  }
}

use it like this

<a mat-icon-button class="small"><mat-icon>add</mat-icon></a>
<a mat-icon-button class="small"><mat-icon>create_new_folder</mat-icon></a>
<a mat-icon-button class="small"><mat-icon>keyboard_arrow_down</mat-icon></a>

[gtzinos]

@naivefun https://stackoverflow.com/questions/43887701/how-to-change-md-icon-size-in-material

[jlosardoLB]

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

:host /deep/ destination {
my styles here......
}

[mackelito]

@jlosardoLB FYI /deep/ and ::ng-deep are deprecated (but ::ng-deep is preferred)

[stephengardner]

Here you go - an answer that will work for Angular 6 and will not leave funky sizing.
You apply this to the mat-icon-button, not the mat-icon inside the button. Again, it's on the outer button.

@mixin mat-icon-button-size($size: 40px) {
  width: $size;
  height: $size;
  line-height: $size;

  .mat-icon, .mat-icon-button i {
    line-height: $size / 2;
  }

  .mat-icon {
    width: $size / 2;
    height: $size / 2;
    margin: 0;
  }

  .material-icons {
    font-size: $size / 2;
  }
}

Heres how I use it:

• Create a file: src/app/styles/mixins.scss and put the code inside that.

• Now, In your angular.json that is generated with your angular project, add this to your "architect" > "build" > "options" block.

"stylePreprocessorOptions": {
  "includePaths": [
    "src/app/styles"
  ]
},

• You can now use this in a stylesheet by doing:

@import "mixins";
:host {
  mat-icon-button {
    @include mat-icon-button-size(35px);
  }
}

Cheers.

[Reboog711]

Using @angular/material 6.4.7 I had to modify @stephengardner 's Mixin so the .mat-icon had a margin of 0 or else the icon would not be centered on the button:

  .mat-icon {
    width: $size / 2;
    height: $size / 2;
    margin: 0;
  }

But, thanks for the solution.

[stephengardner]

@Reboog711 right on - I've updated my snippet above to help some folks out. Thanks.

[BrightShadow]

Serious, you do all those things to change material icon size!?!? Don't you think it sucks?
Angular team is really doing bad design, and not only with those icons.

Each update break layouts, even without using /deep/ shit... I don't know what happened but it is not the same quality as in Angular 1.x.....

[mackelito]

@BrightShadow layouts break for each update? that's really bad!.. have not happened more than once or twice for me in the last 2-2,5 years.. perhaps you have a rather fragile design?

When you say "even without using /deep/ shit".. it kind of sounds like you might be using it wrong? Perhaps you could show some issues you are having?

[BrightShadow]

Hi @mackelito,

have not happened more than once or twice for me in the last 2-2,5 years.. perhaps you have a rather fragile design?

Hmm, really? maybe you are using it in less complex solution... no idea.

When you say "even without using /deep/ shit".. it kind of sounds like you might be using it wrong?

Rather not, we are quite experience team. by this /deep/ I meant that, this is a selector not used by us, one of the element will be removed, and even doing it by the book cause problems. (maybe shit was to strong here, many people are still using it).

Perhaps you could show some issues you are having?

Not really. But I remember e.g. that some migrations were not working. Sometimes, Angular Material updates just breaks layouts, because the concept of modals, or some internal styles has been changed. I remember situation when modals just stopped working after one of updates. Even some examples in documentation of Angular material are not working (check it please) 👍 I think that maybe most of problems are caused by not ready, missing or obsolete documentation examples...

Maybe I'm expecting too much...

[mackelito]

Hmm, really? maybe you are using it in less complex solution... no idea.

I would not say that our project is that complexed 2 apps, e-commerce with 10 modules, about 90 components and 30+ services and one admin app using about 12 modules, 20 components and 10 services..

Rather not, we are quite experience team. by this /deep/ I meant that, this is a selector not used by us, one of the element will be removed, and even doing it by the book cause problems. (maybe shit was to strong here, many people are still using it).

So you mean that the Material's team are using it and should stop using it?

Not really. But I remember e.g. that some migrations were not working. Sometimes, Angular Material updates just breaks layouts, because the concept of modals, or some internal styles has been changed. I remember situation when modals just stopped working after one of updates. Even some examples in documentation of Angular material are not working (check it please) 👍 I think that maybe most of problems are caused by not ready, missing or obsolete documentation examples...

Well how else would they go about doing refactoring? We always try to keep up to date and not lagg behind for more than 2-3 versions... for each upgrade we just read the release notes and do changes if needed.. never been a big deal..

[BrightShadow]

I would not say that our project is that complexed 2 apps, e-commerce with 10 modules, about 90 components and 30+ services and one admin app using about 12 modules, 20 components and 10 services..

Yeah, we also have something similar :-)

So you mean that the Material's team are using it and should stop using it?

No, I'm not.

Well how else would they go about doing refactoring? We always try to keep up to date and not lagg behind for more than 2-3 versions... for each upgrade we just read the release notes and do changes if needed.. never been a big deal..

Probably they can't do it other way.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}