SVG Icons not appearing in tabs

#1

22%20PM

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-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>

    <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>

    <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>

    <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>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
    <title>menu_icon</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <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>
    </defs>
    <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>
        </mask>
        <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>
                </mask>
                <use id="Grey" stroke="none" fill="#58595B" fill-rule="evenodd" xlink:href="#path-3"></use>
            </g>
        </g>
    </g>
</svg>

thanks

#2

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.

#3

that did not work. it was still blank.

#4

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

#5

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