How to select material design icons? (zmdi)
-
Not sure if this is a bug or just one misunderstanding of mine. Using OnsenUI 2, it seems to be possible to use Material Design Iconic.
I then created an icon with
<ons-icon icon="zmdi-arrow-right" size="25px"></icon>
but nothing happened. Actually I can see that the created element has a class ofons-icon fa fa-zmdi-arrow-right
.At this point what I do in the
init
of my page is a simple$(page).find('ons-icon').each((idx, ico) => { ico.className = ico.className.replace('fa fa-', 'zmdi '); });
which of course is less than ideal (but it works).
Which is the correct way?
Thanks!
-
@claudioc These are the icons: https://zavoloklom.github.io/material-design-iconic-font/icons.html
And the prefix for Material Design icons is
md-
. Example:<ons-icon icon="md-menu"></ons-icon> <ons-icon icon="md-edit"></ons-icon> <ons-icon icon="md-delete"></ons-icon>
-
Ah! Damn, I was looking into the CSS file and all the icons had the zmdi prefix.
Thanks!
-
Is this true for all Material Design Icons? Are they updated automatically? …and if not is there a definitive list of those that are implemented?
I am trying to add “time” as <ons-icon icon=“md-time”></ons-icon>, but it comes out blank…