Sencha touch - cannot style image to be smaller on a button

I have the following item within a container. My problem is with the xtype button, in particular the 'text' property. The php code works correctly and the span also makes the font red, but I am unable to style the image to 22 by 22 pixels. Even when I upload the image as 22 by 22 pixels, it ends up enlarged to 38x38. It's possible a style rule somewhere else is interfering, is there开发者_StackOverflow a way to override it by typing appropriate text into to the text property? Thanks

{
            xtype:"form",
            baseCls:"",
            cls:"search1-container dotted-line",
            url:"search",
            standardSubmit:true,
            layout:"hbox",
            items:[myapp.textBoxes.freeSearch,{
                xtype:"button",
                text:"<img src='images/Search.png'  style='float:left; height:22; width:22;' />Pre-owned <span style='color:red; font-size: 11px; display:inline-block; vertical-align: top;'> [<?php echo $rows; ?> Cars]</span>",
                cls:"search1-submit"
            }],
            listeners:{
            }
        }

Try this:

Style

<style>
.icon {
    background-image: url('images/Search.png');
}
</style>

Code

Ext.create('Ext.panel.Panel',{
xtype:"form",
baseCls:"",
cls:"search1-container dotted-line",
url:"search",
standardSubmit:true,
layout:"hbox",
items:[{
    xtype:"button",
    height: 32, // you can change this parameter too
    text:"Pre-owned <span style='color:red; font-size: 11px; display:inline-block; vertical-align: top;'> [Cars]</span>",
    iconCls : "icon",
    cls:"search1-submit"
}],
renderTo:Ext.getBody()

});

He is asking how change the size of the button icon, not how to change the size of the button itself