[2.2.0RC] icon mess in tabbar if unknown icon

Looks like 'all' available icons are displayed when a tabbar icon is not found...
I had it first on tab #1. Then I set something known to #1. Now I have it on #3...

Attachment 42908

So you have to set the iconCls to something that isn't found to reproduce? I tried but I cannot reproduce:

Code:

---

Ext.Viewport.add({
    xtype  : 'tabpanel',
    tabBar : {
        docked : 'bottom'
    },
    items  : [
        {
            title  : 'One',
            iconCls : 'home'
        },
        {
            title  : 'Two',
            iconCls : 'team'
        },
        {
            title  : 'Three',
            iconCls : 'action123'
        },
        {
            title  : 'Four',
            iconCls : 'more'
        }
    ]
});

---

but I have a feeling I'm not fully understanding you.

no, no - that is exactly what I'm saying. Tab #1 (speedometer1) and #3 (chart2) have non-standard icons whereas #2 (team) and #4 (more) are from the standard icons. When I leave them as they are then I get this:

Attachment 42913

When I set "speedometer" in #1 then this:

Attachment 42914

When I set "chart" in #3 then this:

Attachment 42915


But the worst is: I can not reproduce this with a test app!
I generated a new app with 2.2 and replaced the icon #1 with "speedometer1":

Attachment 42916


BTW: what's the easiest way to visualize the new icons from the icon-font? In older versions there was the folder with all the pictos. How are we supposed to do it with 2.2+?

ok, found out what's happening: I was using the icon speedometer1 (and others) in the app. So I had this in my sass file:

Code:

---

@include pictos-iconmask('speedometer1');

---

Now with V2.2 and all it's changes, I thought we would get the same icons, only the sass commands were changing. So I changed it like this:

Code:

---

@include icon('speedometer1');

---

Apparently this assumption was not correct. Although the result of specifying speedometer1 as iconCls had an interesting impact on the toolbar (see screenshots from previous post).

So the big questions that remains: where in V2.2 can I see which icons I can use? And how can I specify my own?

Here are all the icons: http://pictos.cc/font/
Save the picture in your SDK doc folder for easy access.

And regarding the inclusion of your own icons, you have to install a software which can create fonts and then create your own font using your pictos.
Another solution is to resuscitate the pictos-iconmask mixin in your customised theme and to use it for your custom icons. It also means having to do the work twice when wanting to theme those icons.
EDIT: From the 2.2 documentation, use http://icomoon.io to create your icon fonts.

thank you interfasys - very helpfull!

Just found out that the samples on the official sencha docs have the same issues:
http://docs-devel.sencha.com/touch/2...api/Ext.Button

This here should show the refresh icon only:
Attachment 42976


And this doesn't need further comments:
Attachment 42977