SVG Icons not appearing in tabs

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

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?