ion icons not showing up on ipad / edge

Question

I have a stenciljs component deployed in an nginx server behind an authentication service. In order to get anything the request must include a cookie containing an access_token. the component is dipslyaed with no preoblem on android devices and on chrome/firfox/IE11/ in desktop devices. the problem is with microsoft edge and on ipad (any navigator) and its due to the browser not sending the cookie to the server. Any hint ?

header.tsx

import { Component, Prop, State, Element } from '@stencil/core';
@Component({
  tag: 'pm-header',
  styleUrl: 'pm-header.scss',
  shadow: true
})
export class PmHeader {

...

  render() {
    return (
      <nav>
        <ul>
          <li id="menu-icon" class="left menu-icon"
            onClick={() => this.toggleFocus('menu-icon')} >
            <a>
              <ion-icon name="md-apps"></ion-icon>
            </a>
          </li>
          <li id="user-icon" class="right menu-icon"
            onClick={() => this.toggleFocus('user-icon')} >
            <a>
              <ion-icon name="md-contact"></ion-icon>
            </a>
          </li>
        </ul>
      </nav>
    );
  }
}

PS: I'm using stencil/core v0.15.2

Answer 1

So after some digging it turned out that the issue is with ionicons implementation. They fetch the svgs without sending the credentials which result in an authenticated request. Of course some navigator such as chrome and firefox and even IE11 manages to send the cookies even though it's not explicitly specified that they should. Anyway, to solve this I had to create a script file that run after the build. This script adds credentials: "include" option to the fetch call so that the cookie get sent.

fix-icons-script.js

/** 
 * Workaround to fix this ion-icons bug https://github.com/ionic-team/ionicons/issues/640
 * To be removed when this bug is fixed
 */
const fs = require('fs');
const workDir = 'dist/component-dir';

fs.readdir(workDir, function(err, items) {
  if (err) { return console.log(err); }

  for (var i=0; i<items.length; i++) {
    if (items[i].endsWith('.entry.js')) {
      insertString(workDir + '/' + items[i], '"force-cache"', ',credentials:"include"');
    }
  }
});

function insertString(file, searchValue, insertValue){
  fs.readFile(file, 'utf8', function (err, content) {
    if (err) { return console.log(err); }

    let newContent = content.substr(0, content.indexOf(searchValue) + searchValue.length);
    content = content.substr(newContent.length, content.length); 
    newContent += insertValue + content;

    fs.writeFile(file, newContent, function (err) {
      if (err) { return console.log(err); }
      console.log('Successfully rewrote ' + file);
    });
  });
}