SVG Icons not appearing in tabs


all my other svgs are appearing, and i’m sure i got the path right because command clicking it takes me to the right svg.

here’s the code for the tabs:


  <ion-tab-bar slot="bottom">
    <ion-tab-button class="tab" tab="tab1">
      <ion-icon src="../../assets/bottom_nav_icons/menu_icon.svg"></ion-icon>
      <ion-label>{{ 'MENU' | translate }}</ion-label>

    <ion-tab-button class="tab" tab="tab2">
        <ion-icon src="../../assets/bottom_nav_icons/policies_icon.svg"></ion-icon>
      <ion-label>{{ 'POLICIES' | translate }}</ion-label>

    <ion-tab-button class="tab" tab="tab3">
        <ion-icon src="../../assets/bottom_nav_icons/investments_icon.svg"></ion-icon>
      <ion-label>{{ 'INVESTMENTS' | translate }}</ion-label>

    <ion-tab-button class="tab" tab="tab4">
        <ion-icon src="../../assets/bottom_nav_icons/liabilityslip_icon.svg"></ion-icon>
      <ion-label>{{ 'LIABILITY_SLIP' | translate }}</ion-label>

here’s the menu_icon.svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="" xmlns:xlink="">
    <!-- Generator: Sketch 52.6 (67491) - -->
    <desc>Created with Sketch.</desc>
        <path d="M4,8 L8,8 L8,4 L4,4 L4,8 L4,8 Z M10,20 L14,20 L14,16 L10,16 L10,20 L10,20 Z M4,20 L8,20 L8,16 L4,16 L4,20 L4,20 Z M4,14 L8,14 L8,10 L4,10 L4,14 L4,14 Z M10,14 L14,14 L14,10 L10,10 L10,14 L10,14 Z M16,4 L16,8 L20,8 L20,4 L16,4 L16,4 Z M10,8 L14,8 L14,4 L10,4 L10,8 L10,8 Z M16,14 L20,14 L20,10 L16,10 L16,14 L16,14 Z M16,20 L20,20 L20,16 L16,16 L16,20 L16,20 Z" id="path-1"></path>
        <rect id="path-3" x="0" y="0" width="50" height="50"></rect>
    <g id="menu_icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        <g id="Mask"></g>
        <g id="Colors/Grey" mask="url(#mask-2)">
            <g transform="translate(-13.000000, -13.000000)">
                <mask id="mask-4" fill="white">
                    <use xlink:href="#path-3"></use>
                <use id="Grey" stroke="none" fill="#58595B" fill-rule="evenodd" xlink:href="#path-3"></use>


should be just “./assets/bottom_nav_icons/investments_icon.svg”

while that initial path will take you to the svg file, that is not the path that will be used once the app is compiled.

that did not work. it was still blank.

Lose the ‘./’ at the start. My mistake. I can never remember if it needed.

I tried that and it works on android but not ios. any idea why?