Default icon color

Flow
1

Hi,

is it possible to have a default icon color that is different from --lumo-primary-text-color?

I find it a bit too harsh.

I know I can use setColor on a per icon basis, but would be nice to be able to just override something like --lumo-icon-color to a new value.

Thank you,

Kristof

2

Did you try?

vaadin-icon {
–lumo-primary-text-color: red;
}

3

Interesting idea!

Didn’t realise you could override variables just within the scope of a selector, but that makes perfect sense

So

vaadin-icon {
--lumo-primary-text-color: red;
}

did not work, but

vaadin-button {
  --lumo-primary-text-color: red;
}

does work, but … it does too much as it changes the text color for all buttons.

This, however, is closer to what I need

vaadin-button[theme~="tertiary-inline"][theme~="icon"] {
    --lumo-primary-text-color: red;
}

So, if I just make sure that all my icon-only buttons have those variants set, then I guess I’m all set.

Strange that the vaadin-icon selector didn’t do the trick … I should probably learn a bit more about these selectors.

Thanks @knoobie for pointing in the right direction!

4

It might be easier to just target the icon part

vaadin-button::part(‘prefix’)

2 Likes
5

Vaadin icons interpretes the css color property like normal text elements do.

While overriding the primary text color custom variable is a variant, you could alternatively simplify things by doing something like

vaadin-icon {
    color: red;
}

To target icons in a button you can do something like

vaadin-button vaadin-icon {
    color: red;
}

Here you can apply normal css selectors to specify the application of the color, for instance

vaadin-button.some-class vaadin-icon[slot="prefix"]

to only colorize icons in the prefix slot and/or target specific button classes. Other elements in the prefix slot will not be affected by this new color in this variant.

Of course you can also use custom variables instead of the red color.

vaadin-icon {
    color: var(--my-icon-color, red);
}

that you then can override at any point as shown above.

The results will be more or less the same as with the above examples, but the resulting css might be easier to read than for instance vaadin-button[theme~="tertiary-inline"][theme~="icon"]

3 Likes
6

Strange that the vaadin-icon selector didn’t do the trick … I should probably learn a bit more about these selectors.

This is because the vaadin-icon uses the fill: currentColor internally and the color is inherited from the button. If you want to change that, you could also customize the fill CSS property directly:

vaadin-icon {
  fill: red;
}
3 Likes