using TabPanel button icons in a Toolbar?

[Larry Q]

I'd like to use the cool TabPanel button icons (download, favorites, etc) in an Ext.Toolbar of mine. Could someone let me if it's possible to set the cls property on the toolbar's buttons so this can happen? I've been experimenting but have had no luck.

[markwyner]

There are multiple posts about this, but here's a basic idea of what you can do…

Call a custom style sheet with an element like this:

.NewIcon {
	-webkit-mask-box-image: url('../img/new_icon.png');
}

Then call that property when setting up the panels that reside in the TabPanel:

new Ext.Panel({
	iconCls: 'NewIcon'
});

This will call your custom icon.

[Riaz]

Simple but useful. Thanks markwyner.

[markwyner]

Absolutely!

[Larry Q]

Thanks much Mark, I'll put this to good use.

[riahut.com]

Actually it doesnt work for me, I followed sample code but no icon displayed, instead I have IMG tag appear with this content

<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="NewIcon" id="ext-gen1023"/>

What is wrong?

[Decio]

Are you using sass for you scss file?