Change SVG size in Angular Material 2 <mat-icon> using vanilla CSS or HTML

Question

How do I change the size of an SVG icon on Angular 2+ Material Design using vanilla CSS, HTML, or JS?

If I specify the icon inside the HTML element, styling works fine:

<mat-icon style="font-size: 16px !important">home</mat-icon>

However, when I use the svgIcon attribute (for instance, if using a third-party icon library), the icon cannot be resized:

<mat-icon style="font-size: 16px !important" svgIcon="home"></mat-icon>

I am aware that SVGs are more complicated to scale, and I could use the viewBox attribute. However, I cannot even access the <svg> child element inside <mat-icon> to do an ugly JS hack. Is there a straightforward way of doing it with vanilla CSS? Or even an ugly hack on the Angular component?

Extra info: I am using the mdi.svg icon library from https://materialdesignicons.com to get additional icons for my Angular project. To use these, however, I must use the svgIcon attribute.

Solution 1

It seems that library styles override your css inline declaration. Try maybe to add !important declaration to your style: style="font-size: 16 !important" or since you didn't provide more code, try to inspect this icon node, to check which style define the font-size.

Also check here

UPDATE:

Here is another possibly working solution. Add transform: scale(2); style for svg element you want to resize, where 2 is 200% of actual size (of course you can also downsize them using for example 0.5 value for 50%). Here is working sample for the website with your icons and link to documnetation:

.size-24 button svg {
    width: 24px;
    height: 24px;
    transform: scale(2);
}

Solution 2

I played with this for way too long.

I have a series of icons that I want to be scaled to fit in various mat-icon sizes, but each icon needs a different scale so they appear balanced with the other icons - effectively increasing the size of the viewBox.

In the end this worked well enough:

mat-icon
{
    width: 50px;
    height: 50px;

    display: flex;
    flex-shrink: 0;
    justify-content: center;

    outline: 1px dashed red;  // for testing    

    & ::ng-deep svg
    {
        align-self: center;
    }

    &.shrink-90 ::ng-deep svg
    {
        width: 90%;
        height: 90%;
    }

    &.shrink-80 ::ng-deep svg
    {
        width: 80%;
        height: 80%;
    }
}

Then I create the mat-icon with this, where iconCss='shrink-80'

   <mat-icon svgIcon="{{ feature.name }}" [ngClass]="feature.iconCss"></mat-icon>

The mat-icon itself can be scaled with whatever additional classes you want (just like you would for a normal icon). Then the 'shrinking' adjusts the size within the box.

Solution 3

In my application, with Material 7, I just changed the width and height of the "mat-icon" element in CSS (with !important, of course), and it worked for me like a charm.

For example:

mat-icon {
    width: 32px !important;
    height: 32px !important;
}

Solution 4

Taking @mpro solution, I did some changes that work better for me ( I have custom icons so maybe that's the reason why):

mat-icon[size="2"]{
  width: 48px;
  height: 48px;
}

mat-icon[size="2"] svg{
  transform: scale(2);
  transform-origin: left top;
}

or the scss solution:

@mixin iconSize($size){
  &[size="#{$size}"]{
    width: 24px*$size;
    height: 24px*$size;

    svg{
      transform: scale($size);
      transform-origin: left top;
    }
  }
}

Solution 5

This is how I change mat-icon size in @angular/material2 6.0.0

Although in this method it is only the SVG icon that changes it size, if you're using mat-icon-button. Just adjust the size of mat-icon button if your new size is too big. You don't need to think of this if its plain mat-icon.

.mat-icon {
   font-size: /* your size here */;
}

View more solutions

Comments

[Gerardo Figueroa]

It actually seems to be more than the style attribute. The styles are in fact defined in their own css file (I wrote them like that for simplification purposes here). The question is how to resize the <svg> from its parent component, as I have no access to the <svg> itself.

[mpro]

@GerardoFigueroa updated the answer, try transform: scale();. More information above.

[Gerardo Figueroa]

That update using the transform property did the trick, thanks!

[aruno]

This may not work if angular team ever deprecates ::ng-deep but they can't seem to decide what they're doing yet.