CODEWITHSUNDEEP
ionic-frameworkionic3
poimsm2
poimsm2

Reputation: 562

Ionic 3 custom icons

Can I just add svg icons in the directory /assets/myIcon.svg and just call the icons as imgs:

<img src="assets/myIcon.svg" >

Also, I am trying to use icons from flaticon. Where should I save the license (a pdf file)?

Upvotes: 1

Views: 1672

Answers (1)

Pisal UTNGY
Pisal UTNGY

Reputation: 147

If you need to use custom icon in your app, here is a solution that worked great for me.

  1. Put your .svg icon file(s) in:

    /src/assets/icons/...

  2. In your app.scss file, add this scss code:

ion-icon {
    &[class*="prefix-"] {
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="prefix-categories"] {
        mask-image: url(../assets/icon/ic_categories.svg);
    }
    &[class*="prefix-menu"] {
        mask-image: url(../assets/icon/ic_menu.svg);
    }
}

  1. Call it in your .html file:

<ion-icon name="prefix-menu"></ion-icon>

  1. To apply more style to the custom icon, you can write something like: 

ion-icon.ion-ios-prefix-categories {
    padding: 2px;
    font-size: 14px;
}

Hope this helps. Anyway about the licensing, I don't know.

Upvotes: 2

Related Questions