How do I change the background color of an iron-icon in Polymer?

Question

I want to change the search iron-icon's background-color to blue. I tried adding a style attribute and setting the background-color: blue but that didn't work. All help is greatly appreciated.

<iron-icon icon="icons:search" on-click="doSomething" hidden$="{{disabled}}"></iron-icon>

Answer 1

You just need to update the fill in css. The default value is currentColor which will match your text color.

<iron-icon icon="icons:search" on-click="doSomething" hidden$="{{disabled}}" 
    style="fill:blue">
</iron-icon>

Answer 2

<iron-icon icon="icons:search" on-click="doSimpleSearch" hidden$="{{disabled}}" class="searchIcon"></iron-icon>

.searchIcon {
            fill: #ffffff;
            *background-color: #3BC2E6;*
            height: 38px;
            width: 60px;
            border-radius: 5px;
        }