How to select material design icons? (zmdi)

claudioc

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 of ons-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!

Fran Diox

@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>

claudioc

Ah! Damn, I was looking into the CSS file and all the icons had the zmdi prefix.

Thanks!

fraserbooth

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…