Q-Avatar add custom icon color from a variable (Solved)

[mboeni]

hey there

Quick question. I would like to bind a variable to the text-color attribute of Q-Avatar like so:

<q-avatar :text-color="{accent}" icon="home" size="48px" />

But that does not do anything. How do I make this work?

Cheers,
M.

[metalsadman]

Remove the braces

[mboeni]

@metalsadman I tried that, the color of the icon is still not affected. I have the impression that does not work at all and the framework falls back to a ‘default’ color or something.

[metalsadman]

when you say ‘variable’ did you mean a css variable or a reactive data? because it’s working fine here https://codepen.io/metalsadman/pen/rNNbYYg. anyway if you want a custom color, you can just use css class / style with color: <somecolor>.

[mboeni]

@metalsadman I’m doing this:

Vue.prototype.$textColor1 = '#6A7C89'

and would, in the final solution, use it like this:

<q-avatar :text-color="$textColor1" icon="home" size="48px" />

is this a correct approach?

I was using ‘accent’ to test if it works with the built-in brand colors.

[metalsadman]

@mboeni it works with brand colors and quasar colors from https://quasar.dev/style/color-palette#Color-List. since you are using a hex, better use style binding. ie :style="{ color: $textColor1 }". https://codepen.io/metalsadman/pen/rNNbYYg

[mboeni]

@metalsadman yep, that solved it. It works now as expected! Thanks :)`