Unable to Set Size for md-icon using Iconset and CSS Styling (when using JQuery)

[nkoterba]

I'm trying to use iconsets as described on the angular material demo for md-icon.

I grabbed the demo core-icons.svg file.

I included the following code in my angular app:

        .config(['$mdIconProvider', function($mdIconProvider) {
            $mdIconProvider
                .iconSet('core', '../styles/images/icons/material-design/core-icons.svg', 24)
        }])

My html before styling:

    <md-button ng-click="vm.showNewDialog($event)">
        <md-icon md-svg-src="core:alarm" style="color: yellow"></md-icon>
        <span>New</span>
    </md-button>

Result:

Now I try to use CSS properties to resize the icon:

My html:

    <md-button ng-click="vm.showNewDialog($event)">
             <md-icon md-svg-icon="core:alarm"
                  style="color: yellow; height: 14px; width: 14px"></md-icon>
        <span>New</span>
    </md-button>

Result:

However, my image does not resize, the md-icon element just gets resized, clipping the md-icon.

Using the chrome inspector, we can see this:

Oddly, loading icons from svg URLs does resize the icons if we apply css styles to them:

    <md-button ng-click="vm.showNewDialog($event)">
        <md-icon md-svg-src="styles/images/icons/material-design/content/ic_add_24px.svg"
                style="color: yellow; width: 10px height: 10px;"></md-icon>
        <span>New</span>
    </md-button>

Has anybody else experienced this or found a solution?

[ThomasBurleson]

Close since online demos work with resizing.

[nkoterba]

@ThomasBurleson I have discovered the situation where the md-icon resizing fails.

At first, I thought it was something strange in my app environment. It turns out, it simply is the inclusion of jQuery in the webpage (which I'm using instead of jqlite).

I've published a trivial example of how including jQuery in a webpage "breaks" the CSS resizing when using an iconset. material-design-broken-icon.

In summary, by simply including

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

in the webpage, the icon resizing via CSS fails.

I haven't dug deeper into why including jQuery causes the issue, but assume many others may be using jQuery instead of jqlite.

[nkoterba]

@ThomasBurleson Any comment or update on this? Do you plan to re-open this issue? We've had to revert back to using individual .svg images because there's no way to size iconsets when jquery is included in our webapp.

Thanks.

[dinoboff]

When jQuery compiles the svg elements, it changes their attributes names to lower case; preserveAspectRatio is set preserveaspectratio and viewBox is set to viewbox.

Since preserveAspectRatio is not set to xMidYMid meet, the svg element do not scale properly (the effect may vary depending of the browser).

http://plnkr.co/edit/1DjXKLMYrvmb1ZLEuHhI?p=preview

[dinoboff]

Actually, the problem is with jQuery.fn.attr:
http://codepen.io/dinoboff/pen/dPjwBe?editors=101

jQuery should either be fixed or $mdIcon should use the element setAttribute method to set preserveaspectratio and viewBox:
https://github.com/angular/material/blob/master/src/components/icon/iconService.js#L437-L448

[dinoboff]

@nkoterba You can use jQuery hooks to fix jQuery handling of those attributes:

['preserveAspectRatio', 'viewBox'].forEach(function(k) {
  jQuery.attrHooks[k.toLowerCase()] = {
    set: function(el, value) {
      el.setAttribute(k, value);
      return true; // let jQuery know the setter could handle it
    },
    get: function(el) {
      return el.getAttribute(k);
    },
  };
});

http://codepen.io/dinoboff/pen/azjXaj

[ThomasBurleson]

@dinoboff - Your input is very helpful. I think ngMaterial should compensate for these changes also.
@programmist - What do you think?

[programmist]

@ThomasBurleson If this is indeed a difference between jQuery and jQLite then using the DOM API should fix the issue. Angular 2.0 won't support jQLite anyway from what I've read. I'll create a fix and fork @dinoboff's Codepen to test it. Thanks again for tracking this down @dinoboff.

[ThomasBurleson]

@programmist - you rock. Thx.

[programmist]

I've got a fix. I'll submit a PR shortly.

See error condition here:
http://codepen.io/programmist/pen/emLYdj

See issue fixed here:
http://codepen.io/programmist/pen/ogPNzK

[ThomasBurleson]

@programmist - is this issue still open ?

[programmist]

It's fixed and when I referenced it from my PR it added a closed label (above) that says "This issue will close once pull request #1803 is merged into the 'master' branch." Maybe that's why it still shows up as open?

[gtzinos]

Guys this is a workaround:

.material-icons.md-18 {
font-size: 18px !important;
height: 18px !important;
width: 18px !important;
}
.material-icons.md-24 {
font-size: 24px !important;
height: 24px !important;
width: 24px !important;
}
.material-icons.md-36 {
font-size: 36px !important;
height: 36px !important;
width: 36px !important;
}
.material-icons.md-48 {
font-size: 48px !important;
height: 48px !important;
width: 48px !important;
}