Avatar - choose colour and 3 character ID display

Question

Is there a way to set the background colour of an Avatar component?

Is it possible to display a three letter abreviation?

BenElan · Answer

FYI I did create an issue to allow setting the background color for Avatars, however we don't plan on allowing three letters. So as you mentioned SVG is your best bet.

BenPitcairn · Answer

Thanks for your response. I realise an image is possible but it is overkill for my needs and the images would have to be generated dynamically.
I was trying to use them as part of a legend for map features. What I need is a coloured marker that matches the feature on the map and a three letter abbreviation for the name of the feature. Which is very close to the Avatar compopnent.

I have got around this by using an SVG with a circle and text, placed inside a Chip component in the "image" slot.

BenElan · Answer

Hi @BenPitcairn,

You can use avatar's thumbnail property to display an image. You can create the image in whatever color/letters/style you want! Here is an example:

https://codepen.io/benesri/pen/wvmWZBR

Note: Using an image with text is not accessible. The colors we use in avatar also consider contrast ratio guidelines.