Is there a way to get a filled material icon?

Anvil Q&A
1

What I’m trying to do:
I would like to draw a circle with solid fill as an icon, similar to this from Google Fonts.

What I’ve tried and what’s not working:
In my dummy app, I’ve created a ButtonMenu and I’ve not been able to find any options to fill in the icon. I can change the color of the circle, but not fill it.

Generating the ButtonMenu from code doesn’t seem to have any additional options.

Is there a relatively easy way to get the filled version of the material icon?

Clone link:

2

I’ve written this up as a feature request here

As a work around - can add a role
Go to Theme > Roles and create a new role “filled-icon”

Then in theme.css add the following:


.anvil-role-filled-icon .material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

When you change the role of a component to filled-icon it should now have a filled icon

8 Likes