Ionic-framework: ionic4: allow custom icons for ion-tab

Created on 30 May 2018 · 3Comments · Source: ionic-team/ionic-framework

Feature Request

Ionic Info

cli packages: (/usr/local/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

local packages:

   @angular-devkit/core       : 0.6.0
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.1
   @ionic/schematics-angular  : 1.0.0-rc.6
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   NodeJS : v8.9.4
   npm    : 5.8.0
   OS     : Linux 4.10

Describe the Feature Request
It is now possible to use custom svg's for ion-icon. This should also be implemented for ion-tab.
https://github.com/ionic-team/ionicons/blob/master/readme.md#basic-usage
Related issue: https://github.com/ionic-team/ionicons/issues/551

Describe Preferred Solution
Maybe use an icon-src attribute or something similiar?
I think it's up to you what makes the most sense in this case.

triage

Source

RafaelKr

👍4 ❤1

Most helpful comment

I am using a work around while subscribing on this issue, hope that it helps:

put your svgs in an asset folder (the svg HAS TO START WITH md- or ios-)
on the angular.json file add something similar to this into the assets array

{
   "glob": "**/*.svg",
   "input": "src/assets/icon",
   "output": "./svg"
}

use it as you need, for example the below md-icon-home is a custom icon

<ion-tab label="Home" icon="md-icon-home" href="/tabs/(home:home)">
   <ion-router-outlet name="home"></ion-router-outlet>
</ion-tab>

dmastag on 4 Jun 2018

👍9 🎉2 😕1

All 3 comments

I am using a work around while subscribing on this issue, hope that it helps:

put your svgs in an asset folder (the svg HAS TO START WITH md- or ios-)
on the angular.json file add something similar to this into the assets array

{
   "glob": "**/*.svg",
   "input": "src/assets/icon",
   "output": "./svg"
}

use it as you need, for example the below md-icon-home is a custom icon

<ion-tab label="Home" icon="md-icon-home" href="/tabs/(home:home)">
   <ion-router-outlet name="home"></ion-router-outlet>
</ion-tab>

dmastag on 4 Jun 2018

👍9 🎉2 😕1

This will be easily accomplished with the latest tabs API. With full control over what goes into each ion-tab-button, you'll be able to set the ion-icon yourself. This will be in the 4.0.0-beta.14 release. Please see my comment here for more information: https://github.com/ionic-team/ionic/issues/15942#issuecomment-433429959. Thanks!

brandyscarney on 26 Oct 2018

🎉1

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.