Monaca Onsen UI Discord Chat Github Repo

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


  • Onsen UI

    @claudioc These are the icons:

    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.


  • 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…