Closed GalGreenfield closed 5 years ago
Not quite sure what you mean. Do you mean the icon is 24x24, but account-box-outline actually only takes up 18x18?
Not sure how we would fix that as each icon is a different size.
Not sure exactly what you meant, but the <svg>
is 24x24px and the <path>
is only 18x18px.
And it's weird to me because as I mentioned, it doesn't happen with the SVG code from the website for this icon.
And it's not a question, it's an issue. It shouldn't be like this - especially since the icons from the website don't behave like that.
You could theoretically get the min and max x
and y
and set the viewBox
. That math is way beyond my ability though and outside of the scope of this component.
https://material.io/design/iconography/system-icons.html#grid-keyline-shapes
If you scroll down to "Keyline Shapes" explains proportions. The icons are designed to be placed next to each other vertically and horizontally and look uniform.
I realized that the problem might have been due to me exporting the SVG code as a file via Adobe Illustrator - it might have changed the properties of the SVG in the one I use (where the path fill the viewbox, where there isn't padding).
Thanks for the information, that's probably the source of the difference - I'll just work with the component rather than the files I exported from Illustrator.
Hi,
I'm using the icon
AccountBoxOutline
and noticed that the<svg>
is bigger than the<path>
itself, so I end up getting an<svg>
with content that is smaller than the<svg>
itself.Downloading the
<svg>
file for the icon from the website and importing that file does not provide the same problem.What can be done to fix this? It shouldn't be like this - this is wasted space (and in my use case, space is quite necessary).