Unclear purpose of $mdIconProvider's optional IconSize

[nkoterba]

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:

iconSize
(optional)
string
Number indicating the width and height of the icons in the set. All icons in the icon set must be the same size. Default size is 24.

At first, I thought I could use this to generate a range of icon sizes:

            _.map(_.range(6, 72, 6), function(i) {
                $mdIconProvider
                    .iconSet('action' + i, '../styles/images/icons/material-design/action-icons.svg', i)
                    .iconSet('alert' + i, '../styles/images/icons/material-design/alert-icons.svg', i)
                    .iconSet('av' + i, '../styles/images/icons/material-design/av-icons.svg', i)
                    .iconSet('communication' + i, '../styles/images/icons/material-design/communication-icons.svg', i)
                    .iconSet('content' + i, '../styles/images/icons/material-design/content-icons.svg', i)
                    .iconSet('device' + i, '../styles/images/icons/material-design/device-icons.svg', i)
                    .iconSet('editor' + i, '../styles/images/icons/material-design/editor-icons.svg', i)
                    .iconSet('file' + i, '../styles/images/icons/material-design/file-icons.svg', i)
                    .iconSet('hardware' + i, '../styles/images/icons/material-design/hardware-icons.svg', i)
                    .iconSet('icons' + i, '../styles/images/icons/material-design/icons-icons.svg', i)
                    .iconSet('image' + i, '../styles/images/icons/material-design/image-icons.svg', i)
                    .iconSet('maps' + i, '../styles/images/icons/material-design/maps-icons.svg', i)
                    .iconSet('navigation' + i, '../styles/images/icons/material-design/navigation-icons.svg', i)
                    .iconSet('notification' + i, '../styles/images/icons/material-design/notification-icons.svg', i)
                    .iconSet('social' + i, '../styles/images/icons/material-design/social-icons.svg', i)
                    .iconSet('toggle' + i, '../styles/images/icons/material-design/toggle-icons.svg', i)
                    .iconSet('core' + i, '../styles/images/icons/material-design/core-icons.svg', i)
            });

However, when I use them in my html:

<md-icon md-svg-icon="navigation60:close" alt="close"></md-icon>

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.

[dinoboff]

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

[dinoboff]

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

[ThomasBurleson]

@programmist - can you respond to this.

[programmist]

@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?

[nkoterba]

@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 $mdIconProvider is doing:

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 $mdIconProvider to be say 64x64, then my icons in that set would by default appear 64x64 unless I explicitly defined their size using CSS width and height properties.

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 $mdIconProvider

I will re-check it against #1679.

[dinoboff]

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.

[programmist]

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

[programmist]

This Codepen may do a better job at describing the idea that I did.
http://codepen.io/programmist/pen/jEezEM?editors=100

[nkoterba]

Ok.

So for $mdIconProvider:

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:

iconSize
(optional)
string
Number indicating the width and height of the icons in the set. 
All icons in the icon set must be the same size. Default size is 24.

Possible Rewrite:

iconViewboxSize
(optional)
number
If each icon in the iconset includes a `viewbox` attribute, this value will be ignored.

Otherwise, this number should equal the width and height of the original SVG icon shapes as it 
will be used to create `viewbox` attributes for each icon to ensure icons are scaled correctly.

NOTE: All icons in the icon set must be the same size. Default size is 24.

[ThomasBurleson]

@programmist - is this issue still open ?

[programmist]

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?