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?

    Thanks!


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


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

    Thanks!


Log in to reply