Dynamic image icon in "ion-tab"

ionic-v1
1

Hi,

I’m trying to create an ion-tab element whose icon is an image file (PNG) configured from a server.
If I use the icon attribute, the referenced CSS class must already exist, but the URL of the icon image is dynamically requested to the server, so it wouldn’t work.

I tried using the ng-style directive to set the CSS background-image attribute, but the styles are set on the ion-tab element, not on the i element generated by ion-tab, which actually shows the icon.

Does anyone know if this is currently possible to accomplish?.

Thanks in advance.
Regards,
Rafa.

2

Try the ng-class on the i.
Usage: ngClass

3

Thanks for your suggestion, but I don’t think ng-class suits my requirements.
Using ng-class would apply a CSS class to the element, but the problem is I can’t define the class of the icon because the image is dynamically configured from the server. It’s the same problem as with the icon attribute.

What I’m trying to say is I can’t define a CSS class like this and apply to the i element:

.my-tab-icon{
	background-repeat: no-repeat;
	background-position: center;
        background-image: url('{{serverConf.iconUrl}}');
}
4

I had the same problem where the items I wanted to change were being created dynamically by the ion-tabs directive, so I couldn’t directly attach classes to them. But you can dynamically add a style to an existing (or new) class. I’m using this technique to enable users of my app to be able to specify the foreground color and background color for the navbar and tab bar via the querystring.

The icon class looks like:
<i class="icon ion-ios7-paper-outline" ng-if="getIconOff() &amp;&amp; !isTabActive()"></i>

We can target that specific tab icon and then add style declarations, like one for a background-image, with code like this… (I use this in my own code for other things, so this is untested. Also, this doesn’t take into account that you’ll need to remove the icon. Maybe if you use an icon name that doesn’t exist you won’t have to deal with that?)

var themeSelectors = ".tab-item .ion-ios7-paper-outline";
var declarations = {};
declarations["background-image"] = "url('your url')";

 AddCSSService(themeSelectors, declarations);

// Add a new CSS style to the DOM. Selectors is a string with one or more selectors (ie ".tabs, .bar")
// and declarations is an object with property:value (ie {"color":"red", "background-color":"#FFF"})
.factory('AddCSSService', [function() {
    return function(selectors, declarations) {
        var declarationString = "";
        angular.forEach(declarations, function(value, key) {
            declarationString += key + ":" + value + " !important;"
        });

        if (declarationString != "") {
            var sheet = document.createElement('style');
            sheet.innerHTML = selectors + " {" + declarationString + "}";
            document.body.appendChild(sheet); 
        }
    };
  }
])
1 Like
5

Thanks!, that may work in my case, though the approach of appending elements (style) to the document from the controller doesn’t look too ionic/angular-ish.

6

If you figure out something more ionic/angular-ish, please share!

1 Like
7

For me it not working. Could you write whole example?

8

Forget, it works BEAUTIFULL, just have to rememeber- use it in tabs controller
Cheers!

9

You are my hero @rajatrocks

Saved my ass

10

It’s working for me.
Thanks a lot.