How to support the "fill" attribute for Material Symbols?

[gabephudson]

I am helping my team stitch from the standard MudBlazor icons to this new MudBlazor.Icons library in anticipation of this being the favored approach in the future.

At the same time, we will be switching to the Material Symbols as Google has deprecated the icons. That said, the Symbol font now controls displaying "filled" icons by using a "fill" attribute...
https://m3.material.io/styles/icons/applying-icons#ebb3ae7d-d274-4a25-9356-436e82084f1f

If we want to style these symbols as "filled", how would one accomplish this? From the google docs, it looks like a url query parameter (fill). Not sure how this translates to CSS and this library?

Please pardon my ignorance, my web font knowledge is basic.

[ScarletKuro]

Here is the guide from Google about Material Symbols: https://developers.google.com/fonts/docs/material_symbols.

For example, let's take:

<MudIcon Icon="@MaterialSymbols.Outlined.Home"></MudIcon>

If we want to make the Home icon filled, we can open this website, find the needed icon (Home) here: https://fonts.google.com/icons, use the customize section, and copy-paste the end result CSS:

<style>
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
</style>

<MudIcon Icon="@MaterialSymbols.Outlined.Home"></MudIcon>

Now we have a filled Home icon.

If we don't want it to be global but individual, we just wrap it in our own class and apply the class to the MudIcon:

<style>
    .home-filled {
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
</style>

<MudIcon Class="home-filled" Icon="@MaterialSymbols.Outlined.Home"></MudIcon>

Does this helps?

[gabephudson]

Thank you for the detailed response! I was missing the "font-variation-settings" knowledge (never heard of that property). This explains it.

That said, we mix and match outline/filled. From a replacement standpoint, it is possible to add a "fill" css class to each of our filled icons, but it is not ideal from a "find/replace" standpoint.

Would it make sense to add a .outlined-filled, .sharp-filled, etc. (and/or just a .filled based on the outline font) constants to the generator for easy implementation and backward compatibility for Material Icons? If so, I can submit an issue/suggestion?

[ScarletKuro]

Would it make sense to add a .outlined-filled, .sharp-filled, etc. (and/or just a .filled based on the outline font) constants to the generator for easy implementation and backward compatibility for Material Icons? If so, I can submit an issue/suggestion?

I think that can be easily defined in the user code:

Create a .css file and define your custom class:

.filled {
	font-variation-settings: 'FILL' 1;
}

Then reuse it like this:

<MudIcon Icon="@MaterialSymbols.Outlined.Home"></MudIcon> @* not filled *@
<MudIcon Icon="@MaterialSymbols.Outlined.Settings"></MudIcon> @* not filled *@
<MudIcon Class="filled" Icon="@MaterialSymbols.Outlined.Home"></MudIcon> @* filled *@
<MudIcon Class="filled" Icon="@MaterialSymbols.Outlined.Settings"></MudIcon> @* filled *@

The point was to have a 1:1 definition of Google Material Symbols without any predefined subjective styles and leave that to the user.

So, I'm not sure about adding anything on top of that. I understand the backward compatibility point, but I don't think there should be any relation to the old icons as they are totally different icons with a totally different approach compared to the SVG ones.
I wouldn't recommend replacing all icons at once but doing it gradually.

[gabephudson]

Understood. That is the approach we will take. For today, we will stick with the Icons and move to symbols slowly.

P.S. Love the "using alias" suggestion in the docs. We did a find/replace and can now switch out to symbols easily when we are ready....

_imports.razor
@* @using MaterialIcons = MudBlazor.Icons.Material; *@
@using MaterialIcons = MudBlazor.FontIcons.MaterialIcons;