Unable to use certain Material icons

I’ve faced the problem with the Framework7 Icon component.

I’m unable to use some icons because I believe the component doesn’t properly parse the icon name.
Let’s take for example the icon named “label_important”. If I attempt to use it with the code “material:label_important”, I get the icon with the name just “label”.

Another example is the icon with the name “material:outlined_flag”. The component will draw “material:flag” icon with strange padding.

More likely material icons font is outdated. Update with the new one to get all these new icons

I already tried this. I’ve downloaded Material Design Icons fonts and all formats and put it all in my project.

The icon named “label_important” is not particularly new actually. I still insist there is a problem with parsing icons.

You see, suppose my fonts are outdated and the icon named “label_important” is not available. Then I should get no icon, right? If you try to use an icon with non-existent name, you get white space instead of an icon.

I think the framework picks up the “label” portion of the name and shows the icon named “label”. Same for “material:outlined_flag”. I get weird margin because it literally outputs “outlined” as text and then places the “flag” icon.

No, this is how ligatures work. It converts symbols/characters to icons. E.g. label_important, font contains icon for label, but for characters like _imortant there is no anything, so you just see label icon.

E.g. try this:

<i class="material-icons">labelmovieedit</i>

and you will see 3 icons label, movie, edit

Alright, I got it. But still can’t use some icons though. I’ve updated my Material Font Icon font files located in src/fonts directory to the latest ones. I’m using Framework7 6.0.22.

What should I do?

hello i found the answer.
use these classes