In Sencha Touch, exactly how do I change the icon in the Tab Panel to one of the existing picto icons included in Sencha Touch? - extjs

Question

I have researched this issue thoroughly throughout Stackoverflow and have yet to find a precise answer, so here is my question.
I am using Sencha Touch 2.4. I am using its default theme, that is, the theme that you see when you first download Sencha Touch and get set up to develop in it for the first time. I am that new to Sencha.
In Sencha I am making a Tab Panel, and in the Tab Panel, I am trying to include in the tab bar one of the many nice little picto icons included in the development kit that is not included in the default theme, using the lines of code:
title: 'Transfer',
iconCls: 'photo2',
html: 'Text stuff'
In addition, all of the guidance I have read tells me to go into the appropriate .scss file for this theme and add a single line of code, like so:
#include pictos-iconmask(‘photo2’);
Obviously it seems that this line of code should be placed in Panel.scss in the tab directory in the default theme folder, but this does not work. Now I have no idea which .scss file it should be. I have since gone into every .scss file in my SDK labeled something related to my theme, such as "tab", "Panel", "all", "app", etc., and added this line of code, but the icon will not show up. I am obviously missing something. Someone please tell me, assuming the default theme, exactly which file and in which directory and on what line of code in that file do I place this piece of code known as
#include pictos-iconmask(‘photo2’);
Thank you for any help you can give.

Answer 1

In Sencha Touch 2.4, just include the icon (as opposed to pictos-iconmask). For example:
#include icon('photo2');
I would recommend doing this in a high level file, not a scoped file such as tab.Panel.scss. You can always narrow down your SCSS scope later on, however for debugging just toss the include into your base app.scss to ensure it works first.

Answer 2

You can use the following css code to accomplish your task:
.x-tab .x-button-icon.photo2:before, .x-button .x-button-icon.photo2:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
font-family: "Pictos";
content: "N"; //mention your pictos character here like i have mentioned N here
}