Question

I have this button which i have added a custom icon to.

I would like to remove the lighter gray which is within the icon.

This lighter gray is not part of the icon, it’s got to be somewhere within jquery’s CSS which i should be able to overide.

What can I do to my CSS to accomplish this?

You can view source on the link i’ve provided but here is the current CSS:

.ui-icon-my-map {
    background-image: url("images/103-map.png");
    background-position: 4px 50%;
    background-size: 26px 21px;
    height: 24px;
    margin-top: -12px !important;
    width: 35px;
}

Answer 1

your problem is:

.ui-icon, .ui-icon-searchfield::after {
  background: #666;
  background: rgba(0, 0, 0, .4);
}

just add

.ui-icon-my-map {
[...]
  background-color: transparent;
}