CODEWITHSUNDEEP
angularjsiconsangular-material
Ditti
Ditti

Reputation: 47

Angular Material Icons won't work when icon-property is filled from scope

i'm having an issue concerning the Angular Material Icons I cloned from github here. When I use the ng-md-icon directive and specify the icon somehow like icon="cancel" it works as expected. As soon as I try to fill it from scope like icon="{{myIconSet.dialogButtonCancel}} (which also points to "cancel") the questionmark-icon shows up. When looking at the html in chrome's dev console, both icon-propertys show icon="cancel". Below I included the code, resulting html from dev-console and the rendered result. I can not provide a plunker since I am not (!) able to reproduce this behaviour. I was looking around the web for quite some time and tried lots of things other ppl advised to do in somewhat similar cases (different browsers and icons, changing the order of loading .js-files in my html, loading above/below fold, changing the order of injecting modules into the app..) - yet nothing did the trick. I'm using angular, uibootstrap, bootstrap notify and jquery.

Code snippet:

        <div id="dialogButtonEndApp" class="dialogButton materialIconShadow" style="float:left">
            <ng-md-icon icon="cancel" style="fill: black" size="60"></ng-md-icon>
        </div>

        <div id="dialogButtonCancel" class="dialogButton materialIconShadow activeButton" style="float:right">
            <ng-md-icon icon="{{myIconSet.dialogButtonCancel}}" style="fill: white" size="60"></ng-md-icon>
        </div>

Resulting Html document:

<div class="dialogButtonArea">

        <div id="dialogButtonEndApp" class="dialogButton" style="float:left">
            <ng-md-icon icon="cancel" style="fill: black" size="60"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="60" height="60"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path></svg></ng-md-icon>
        </div>

        <div id="dialogButtonCancel" class="dialogButton materialIconShadow activeButton" style="float:right">
            <ng-md-icon icon="cancel" style="fill: white" size="60"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="60" height="60"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path></svg></ng-md-icon>
        </div>

    </div>

And the rendered result

Does anyone have a clue what's going on here? I'm thankful for any advice.

Upvotes: 0

Views: 525

Answers (1)

Leandro Zubrezki
Leandro Zubrezki

Reputation: 1150

The owner of the repo is using attire.$observe('icon', replace); and is using the question mark as a default when the icon is not found.

Said that the problem is using the icon attribute with an interpolation ({{}}), the first time is using {{myIconSet.dialogButtonCancel}} as an icon and because it not a valid one, it uses the question marks. But once the expression is evaluated it should be updating to the new one, as you see the html saying cancel.

I would go to the replace function inside the directive code and check if it's firing or not and with what value.

If you are using it inside another directive, make a test putting the icon in other place, and see what happens. You can always change the icon attribute manually.

Upvotes: 1

Related Questions