How add svg custom icon ionic 2

Question

how to add custom icon ionic 2, i have svg file i need add the icon in menu

this.pages = [
      {icon: 'Test', title: 'Logout', component: LoginPage }
    ];

    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon name="{{p.icon}}" svgversion item-left></ion-icon>
        {{p.title}}
      </button>
    </ion-list>

layout.scss

ion-ion[name="test"][svgversion] {
  content: url("../../img/accountsDeposits.svg");
}

You just add it in `theme/app.core.scss` file using `@font-face` and use it anywhere where you want. — Hiren Gohel, Sep 09 '16 at 06:44

score 0 · Answer 1 · answered Nov 13 '16 at 14:42

0

You just add in /src/theme/global.scss or /page/your-page/your-page.scss:

.logo {

    background: url(../assets/images/logo-vc.svg) no-repeat top left;
    background-size: contain;
    width: 80px;
    height: 35px;
    margin: 20px auto 0 auto;

}

answered Nov 13 '16 at 14:42

Cândido Sales Gomes

94
3

score 0 · Accepted Answer · answered Mar 02 '17 at 21:09

0

You can use fontastic to create svg icon fonts from your svg icons, you can use it online or export to your own svg fontface, it gives you instructions on how to use it, its FREE

Follow link

answered Mar 02 '17 at 21:09

Rohit Vinay

665
7
38

How add svg custom icon ionic 2

2 Answers2