Another Color question for oh-icon

Add-ons UIs
1

Is there a way the set an icon a custom color , not one of the primary colors of the f7 framework.

I don’t find the css variable in the documentation to do this.

2

In the oh component docs there is a quick description of the icon color property:

Color of the icon (for F7/Material icons, a Framework7 color theme, for Iconify icons, a CSS color). Not applicable to OH icons.

So, the answer depends on which kind of icon you are using.

For oh icons, then answer is no. There was a push a while back to figure out how to make it so that oh icons could be recolored, but I don’t know what happened to it.

For f7 icons the answer is if you only use the color property then you are restricted to the default list of colors. However, you can override that color choice by setting the color css directly in the style object. In the following code, the ant icon will be blue and not green:

- component: oh-icon
  config:
    icon: f7:ant
    height: 48
    color: green
    style:
      color: rgb(0,0,255)

For iconify icons, the css color directive can go right in the icon’s color property.

3

Yeah, you can set a custom color on an oh-icon by using custom class you’re not limited to the built-in Framework7 colors. Just apply your own color using regular CSS (like setting the color style). It’s not shown in the docs, but it works just fine.

4

thx!

5

Hi hooram, that sounds good!

Could you please post a example code?