Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 206
Gerardo Figueroa Avatar asked Feb 13 '18 21:02

Gerardo Figueroa


People also ask

How do I increase the size of an angular material icon?

Since Angular Material uses 'Material Icons' Font-Family, the icon size depends on font-size. Therefore, if you want to modify the size of the icon then you change its font-size in your CSS file. You have to set the width and height too.

How do I customize my mat-icon?

Add a class to the mat-icon html tag, as above. Next, add the SCSS for the class so that, when a user hovers over the button the colour of the icon changes. The Icons should now change colour when hovering over them. Enjoy!

How do I use custom SVG icons in HTML?

SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document. If you did everything correctly, your webpage should look exactly like the demo below.

How do I increase icon size in MUI?

How do I change the icon size in MUI? The MUI IconButton can be sized using the CSS properties size and width within the sx prop. It can also be “sized” using the size prop.By default, the size prop adds the following for IconButtons: small – 5px padding.


3 Answers

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);
}
like image 147
mpro Avatar answered Oct 06 '22 01:10

mpro


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.

like image 28
Simon_Weaver Avatar answered Oct 06 '22 01:10

Simon_Weaver


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;
}
like image 42
TheCuBeMan Avatar answered Oct 06 '22 01:10

TheCuBeMan