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!

How to select material design icons? (zmdi) browsing