Custom icons for ion-tabs

app.scss

/** Custom Icons **/
ion-icon {
    &[class*="ci-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="ci-home"] {
        mask-image: url(../assets/icons/ic_home_black_24px.svg);
    }
    &[class*="ci-popular"] {
        mask-image: url(../assets/icons/ic_video_library_black_24px.svg);
    }
    &[class*="ci-menu"] {
        mask-image: url(../assets/icons/ic_image_black_24px.svg);
    }
    &[class*="ci-bookmark"] {
        mask-image: url(../assets/icons/ic_favorite_black_24px.svg);
    }
    &[class*="ci-bookmark-border"] {
        mask-image: url(../assets/icons/ic_favorite_border_black_24px.svg);
    }
}

// Examples:
// <ion-tab [root]="popularRoot" tabTitle="{{ 'Popular' | translate }}" tabIcon="ci-popular"></ion-tab>
// <ion-icon name="ci-popular"></ion-icon>