Question

我想将搜索铁图标的背景颜色更改为蓝色。我尝试添加一个样式属性并设置背景颜色：蓝色但是没有用。非常感谢所有帮助。

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

Answer 1

您只需更新css中的fill即可。默认值为currentColor，与您的文字颜色相匹配。

<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;
        }

Answer 3

您可以尝试使用包含<div>并将其称为“

”

.your-div [class*=" icon-"]{
   background-color: red;
}

我记得在某个地方读到你在设计样式时必须非常具体，因为它们是SVG而不是Base64数据。

/////////////////////选项2 /////////////////////

您是否尝试过拨打iron-icon？（这个对我很好）

iron-icon {
    background-color: red;
}

/////////////////////选项3 /////////////////////

我的HTML

<span class="container vertical center layout flex-1">
<iron-icon class="x-scope iron-icon-0"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z" class="style-scope iron-icon"></path></g></svg>
  </iron-icon>
  <div>icons:accessibility</div>
  </span>

我的CSS

iron-icon:not([style-scope]):not(.style-scope) {
    background-color: red;
}

如何更改Polymer中铁图标的背景颜色？

3 个答案: