Change SVG size in Angular Material 2 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.

@mpro I already took a look at that question and it uses SCSS. I'm looking for a vanilla solution. — Gerardo Figueroa, Feb 13 '18 at 22:13

mpro · Accepted Answer · 2018-02-16T12:35:26.393

24

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

edited Feb 16 '18 at 12:35

answered Feb 13 '18 at 21:51

mpro

14,302
5
28
43

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 ` – Gerardo Figueroa Feb 15 '18 at 16:02
1

@GerardoFigueroa updated the answer, try `transform: scale();`. More information above. – mpro Feb 16 '18 at 12:37
1

That update using the `transform` property did the trick, thanks! – Gerardo Figueroa Feb 16 '18 at 15:55

Simon_Weaver · Answer 2 · 2018-06-05T19:23:37.433

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.

This may not work if angular team ever deprecates ::ng-deep but they can't seem to decide what they're doing yet. — Simon_Weaver, Jun 05 '18 at 17:54

score 3 · Answer 3 · answered Jun 26 '19 at 07:50

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

score 2 · Answer 4 · answered Aug 01 '18 at 14:32

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

score 1 · Answer 5 · answered May 04 '18 at 11:52

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 */;
}

score 0 · Answer 6 · answered Nov 25 '18 at 07:48

In Angular Material 2 you can use the property [inline]="true" in the element. According to the documentation "Whether the icon should be inlined, automatically sizing the icon to match the font size of the element the icon is contained in". So if your mat icon is inside a div element you can set font-size style in the div element and this will be inherited by the mat-icon.

<div class="parent" style="font-size:2em"> <mat-icon>play_arrow</mat-icon> </div>

Change SVG size in Angular Material 2 using vanilla CSS or HTML

6 Answers6