-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Unclear purpose of $mdIconProvider's optional IconSize #1785
Comments
I could be wrong, but I think 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 |
Note that if your icon svg element has a viewBox attribute, it won't be overwritten by the |
@programmist - can you respond to this. |
@nkoterba, @dinoboff: If a value is passed via the iconSize argument it will set the viewBox size for an icon or set of icons. If any SVG already has a viewBox attribute the iconSize argument has no effect on that SVG. Perhaps in nkoterba's example above he had viewBox defined already. Or perhaps it was #1679. Could you retest and let us know if your issue still persists? |
@programmist The iconsets I am using did not have a viewBox size. See: https://raw.githubusercontent.com/nkoterba/material-design-iconsets/master/iconsets/av-icons.svg. Thus, it makes more sense to me now what the It's creating a viewbox element for all my icons since I don't have one at whatever value is passed into $mdIconProvider. My confusion stems from the documentation, which doesn't explain this very well. I also was under the impression that if the viewbox was set by But based on @dinoboff's answer above, it sounds like the viewbox will not actually do any scaling or sizing of the svg images. It just sets the "coordinate" system of the svg. So unless I'm mis-interpreting @dinoboff, then this may just be mis-understanding on my part due to the limited documentation for I will re-check it against #1679. |
|
That's correct. And for the icon to scale properly to the size of its container (the viewPort) the viewBox dimensions must match the icon dimensions. For instance the material-design-icons SVGs for each category come in two sizes: 24x24 and 48x48. These are the native, un-scaled sizes of those icons. If you choose a 24x24 icon set to use with mdIcon then you need to set the viewBox around any icon is "0 0 24 24" if you want it to scale to the size of the container (the md-icon element). We happen to use 24x24 as our default md-icon size and "0 0 24 24" as our default viewBox. This enables people to use the standard 24x24-size material-design-icons without having to specify viewBox (or width/height if 24x24 is their target size). In the event that user-defined icon sets are added, the iconSize argument must match the original, un-scaled width/height of those icons. For instance, say you have an icon set where all icons are 36x36. You'll want to use iconSize of 36 to ensure the the viewBox is set correctly on each icon. Then you'll need to set the width/height CSS styles of any md-icon element to the size you want the icon to scale to. If you don't set the width/height it will default to 24x24, which is probably not what you want |
This Codepen may do a better job at describing the idea that I did. |
Ok. So for If svg definitions include viewbox, then: Do NOT set optional IconSize (as it won't be used and/or will be ignored). If my svg definitions do NOT include viewbox attribute, then: Do set optional IconSize (and make sure it's the same value as the default size of my svg icon shapes, e.g. if my original svg shapes are 40x40, then I should set IconSize='40'). I think the Material Design documentation could be updated to better explain or characterize this and why not also make this value an integer (and convert it to a string if necessary internally?): Original:
Possible Rewrite:
|
@programmist - is this issue still open ? |
I could add some clarifying comments as suggested by @nkoterba if you think it's necessary. It seems that it's potentially confusing to some as is. I wouldn't put a super high priority on it though. Maybe bump it to the next release? |
Closed by f93e117 |
Until #1679 is resolved or settled, I was trying to use $mdIconProvider's optional iconSize property to generate a range of icon sizes to use in my application.
The documentation when using $mdIconProvider to register an iconset and use optional iconSize is:
At first, I thought I could use this to generate a range of icon sizes:
However, when I use them in my html:
I still get a 24 x 24 SVG image (which is the default size of my *-icons.svg files).
What exactly is the purpose of this optional IconSize property on mdIconProvider?
If it is to set the overall size of all icons in the set, then perhaps #1679 is affecting me here as well.
If it's simply to tell the mdIconProvider that all the icons are x by x I don't get why or when this optional parameter would ever be needed.
The text was updated successfully, but these errors were encountered: