3. How to select material design icons? (zmdi)

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to select material design icons? (zmdi)

  • C

    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!

    0 1 Reply
  • Onsen UI

    @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>
    0
  • C

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

    Thanks!

    0

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

    0