Angular svg icon size

Question

I'm making an angular js application and I'm using the icons found https://materialdesignicons.com/ I'm having trouble creating large icons in my project. I'm currently assigning the icons like so.

app.config(function($mdIconProvider) {
$mdIconProvider
    .defaultIconSet('assets/icon/materialdesignicons.svg')
    .iconSet(['large'], 'assets/icon/materialdesignicons.svg');

}); I know the default size is 24px, but if I put in a number like 48, the image shrinks instead of gets larger. What should I put in instead of large?

Answer 1

1. If your icon svg element has a viewBox attribute, it won't be overwritten by the $mdIconProvider size attribute.

2. The size parameter defines the viewBox height and width. viewBox only affects the coordinate system of an SVG element. It should match the dimension of your icon; if they don't match, md-icon might show a zoomed in/out view of the icon.

   However, the actual size of a md-icon element will be defined by its height and width (defined with css); the SVG element will scale up and down inside the md-icon.

---

viewBox is a requirement for a svg element to scale. It sets which portion of its grid to show and how the element in the svg element should scale with it. it just doesn't decide the actual size of the icon which grow with md-iconelement size.

• If viewBox is not set, the svg elements will not scale (that's the jQuery bug); one unite will be 1px regardless of the svg element size.
• If you set the size to something smaller than the svg grid (e.g. "0 0 12 12" for a 24x24 grid), you will zoom onto the top left corner of the icon.
• If you set the size to something bigger than the grid (e.g. "0 0 48 48" for a 24 x 24 grid), you will zoom out with the the icon placed in the top left corner of the svg element.

You can find lot more details here.

Answer 2

I managed to figure out the problem. The icon was being used as a button, but I had the class md-icon-button for the button in addition to the icon. Removing the class from the button fixed the issue.