Button Icon not displaying fully

[alex.mcneal]

So I have buttons (pictured below). I used the Standard Button and have a cls applied to give it color/drop shadow/etc. I'm using icon to give it the image on top ("PLUMBER"), but it's only showing in the center and looks like it has a mask around it. And iconMask is unchecked.

I am also using iconCls to try and give it dimensions but it's still not displaying properly.

Any suggestions?


button1.png
Below is what I'm actually trying to put on top of the button in Architect

button1-correct.png

config.png



Code:
{ xtype: 'panel',
height: '300px',
id: 'businessType',
style: '',
layout: {
align: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
cls: 'KOBbutton',
height: '16%',
id: 'BUILDER',
left: '5%',
styleHtmlContent: true,
width: '90%',
icon: 'resources/image/Blue-Plumbing2.png',
iconCls: 'LargeButtonIcon',
pressedCls: '"\''
},


CSS:
.KOBbutton{
background-size:100% 100% !important;
background: #00476c !important;
border: 1px solid #01273b !important;
border-radius: 2px 2px 2px 2px !important;
-webkit-box-shadow: 0px 1px 0px 1px #d2d2d2 !important;
}

LargeButtonIcon{
width:561px !important;
height:110px !important;
background-size: 561px 110px;
background-color:transparent!important;
}

[mitchellsimoens]

Is the image sized properly when you inspect it?

[alex.mcneal]

Hadn't checked that, but it doesn't look like it so I guess that's the problem.

Is Architect automatically setting the image size to 30 x 30 px somewhere? I haven't set that size anywhere on my end. It seems that it is masking it somehow.

Any suggestions?button-size.jpg

[alex.mcneal]

Would this be a correct way of doing it instead of the icon?

I have cleared the values for the following:
cls: KOBbutton
icon: (none)
iconAlign: left
iconCls: (none)
iconMask: false

and instead have used the HTML property to insert the following:
<img src="resources/image/Blue-Plumbing.png" width="281" height="55">

Will I run into problems doing it this way?