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

问题

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.

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

回答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.

回答3:

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

回答4:

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

回答5:

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>

回答6:

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

来源：https://stackoverflow.com/questions/48776142/change-svg-size-in-angular-material-2-mat-icon-using-vanilla-css-or-html

标签

angular

svg

icons

angular-material2