CODEWITHSUNDEEP
htmlangulariconsangular-materialfont-awesome
DonkeyBanana
DonkeyBanana

Reputation: 3556

How to set lg or 2x on icons in Angular Material (like we do in Font Awesome)?

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?

Upvotes: 1

Views: 1366

Answers (1)

Edric
Edric

Reputation: 26750

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.

Upvotes: 1

Related Questions