1

I'm reading the docs for Angular Material trying to understand the icons. I can't find info on the appropriate way to enlarge them, though.

<mat-icon>home</mat-icon>

In FontAwesome, I'd just set a class like this.

<i class="fa fa-camera-retro fa-2x"></i>

How is it supposed to be controlled in Material?

DonkeyBanana
  • 3,266
  • 4
  • 26
  • 65
  • Possible duplicate of [Change the icon size of Material Design icon](https://stackoverflow.com/questions/36562597/change-the-icon-size-of-material-design-icon) – Jota.Toledo Dec 16 '17 at 17:44
  • https://github.com/angular/material2/issues/4422 – Jota.Toledo Dec 16 '17 at 17:44
  • 1
    @Jota.Toledo I can't see that as a duplicate. I'm using Angular Material, which provides a different, Angular-ish syntax. It's shown in the link for the docs. (Perhaps I should post a copy of it for clarity of the users who don't click links.) – DonkeyBanana Dec 16 '17 at 17:51
  • @Jota.Toledo I've read the liked article at GitHub (and all the related links from there). I don't think this is the correct path to go because it seems to be overly complicated. Usually, when following the syntax as it's supposed to be, the coding is smooth and easy (otherwise, it's an implication that we're doing something wrong, usually). Enlarging the icon is a very basic operation. (E.g. color is set by adding the attribute *color="primary"* to the icons.) – DonkeyBanana Dec 16 '17 at 17:56
  • https://github.com/angular/material2/blob/master/src/lib/icon/icon.scss the default size is fixed to 24px, you can modify it by creating by defining your own set of size classes as mentioned in the dup and in github. Why would you call that a non easy approach? – Jota.Toledo Dec 16 '17 at 17:58
  • @Jota.Toledo Perhaps I'm missing the point of yours. Please elaborate, if this is the case. The link you provided is not a duplicate because it doesn't treat Angular Material syntax shown in the question. Am I mistaken here? As for the GitHub - I find it surprising that the Google team would release a package with only a single size and didn't put in a few default sizes to play with from start. (After all, they provide a few themes for instance - the sizes would be equally expected, wouldn't they?) – DonkeyBanana Dec 16 '17 at 18:02
  • Take this as an example of how to create custom size classes https://github.com/Teradata/covalent/blob/develop/src/platform/core/common/styles/font/_font.scss check the ones under the comment "Rules for sizing the icon." – Jota.Toledo Dec 16 '17 at 18:07

1 Answers1

1

To enlarge them, just create a class (maybe .md-icon-2x?) as follows and add it to mat-icon:

.md-icon-2x {
    width: 48px;
    height: 48px;
    font-size: 48px;
}

Since Material Icons is actually a ligature font, it can be easily changed with the font-size attribute to make the icon larger.

Edric
  • 24,639
  • 13
  • 81
  • 91