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