How is your experience with the OutSystems Community?
57
Views
2
Comments
Reactive web app, Icons are not loaded on IOS devices.

The Outsystems icons are not shown on IOS devices, anyone knows how to fix that? On the outsystem emulator it does work however on an actual device, the icons are shown as squares.

2023-10-21 19-42-11
Tousif Khan
Champion

Hello

In that case, You can give it a try to this, by defining custom fonts for IOS, 

https://success.outsystems.com/Documentation/10/Delivering_Mobile_Apps/Customize_Your_Mobile_App/Modify_the_App_Icon

Hope it helps

Thanks

2025-02-03 14-46-22
Marco Gaspar

I was having the same issue loading icons on a Reactive app in Chrome and Safari (iOS).
I've use this .js in the OnInitialize of the Layout and it worked. In my case, I was having issue loading default Phosphor icons from OutSystems ODC


/* Hack for fonts in iOS Chrome & Safari */(async () => {  try {    const targets = ['Phosphor'];    for (const ss of document.styleSheets) {      let rules; try { rules = ss.cssRules } catch { continue }      for (const r of rules) {        if (r.type !== CSSRule.FONT_FACE_RULE) continue;        const fam = r.style.getPropertyValue('font-family').replace(/["']/g, '');        if (!targets.includes(fam)) continue;        if ([...document.fonts].some(f => f.family.replace(/["']/g, '') === fam && f.status === 'loaded')) continue;        const m = r.style.getPropertyValue('src').match(/url\(["']?([^"')]+)["']?\)/);        if (!m) continue;        const buf = await (await fetch(new URL(m[1], ss.href).href)).arrayBuffer();        const f = new FontFace(fam, buf);        await f.load();        document.fonts.add(f);      }    }  } catch (e) { console.warn('font fallback failed', e); }})();

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.