Deployed Custom Icons don't match Custom icons in editor.

[szymonpodwyszynski]

Has your issue been reported?

• [X] I have searched the existing issues and confirm it has not been reported.
• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

After adding Custom Icons to my design system and adding them to my FF project, icons in editor look fine. Every icon match its expected look. After deploying the app on mobile, custom icons do not match their real look. The icons are mixed up, and do not match the icons in editor at all. Not a single icon is correctly displayed.

Expected Behavior

When I deploy my app on mobile, the Custom Icons from my design system displayed in my deployed app, match the ones that I chose in the editor.

Steps to Reproduce

1. Convert icons through icomoon.io
2. Add custom icons to my design system
3. Create new project
4. Add this design system
5. Add Custom Icons in editor to my page in this project
6. Deploy the app to mobile
7. See that they do not match

Reproducible from Blank

• [X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT4oj+flvYtOmN9c187pbu5GiSQUNmJ7RJEzmspOEDIgfePrBuwIOuPRYk9tcO25aVNcMGC0oHoK0c7IktmWU/o7Cy+qRtRywpFIEDr0e2i7RLK3BZasQXFQTPNjC2HF0Z6zrCJ5JutedCQt3Dv3Oue/RXLDFOu/Zwh9f6PHaOI=

Context

This bug really affected my work flow, as I was trying to import these custom icons and use them in our commercial project. As a worker of an app development team, we try to focus on doing our jobs as effective as possible, thus we couldn't get our work done. We can't move forward with these icons in this state.

Visual documentation

Additional Info

I got redirected here from this email. Let me know if you need anything from me.

Environment

- FlutterFlow version: Newest as of 07.08.2023 (7th August 2023)
- Platform: Mobile (TestFlight)
- Browser name and version: Version 115.0.5790.114 (Official Build) (arm64)
- Operating system and version affected: macOS Ventura Version 13.4.1 (c) (22F770820d)

[hariprasadms]

Hi @szymonpodwyszynski - Thanks for submitting the issue. I can mark this as project specific issue as it is specific to your project. Also please update the custom Icons details ( Where you have generated the custom icons ) in the issue . Currently we are supporting custom icons which are generated from https://icomoon.io/ and https://www.fluttericon.com/. I hope your custom icons are from these sites. Please update.

[szymonpodwyszynski]

Hello, thank you, I’ve updated the details in this issue on github – the icons were generated from icomoon.io.

Pozdrawiam

[github-actions[bot]]

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.

[szymonpodwyszynski]

Has there been any updates? I dont want this issue to be closed and forgotten :).

[davood-flutterflow]

@hariprasadms @sbis04 We already triage this as a project issue in support; we check the names, icons, and other possibilities. there is a chance this is an issue on our end, as clearly, the icons are different in theme setting and different when we run the app.

[szymonpodwyszynski]

Hi, i've reproduced this issue, on a different project with those icons, adding them manually to the theme settings in this project. The result was the same - the icons are mismatched and are different in editor and in deployed app(in this instance on web). This is strange, as the icons are displayed correctly on theme settings when i upload those icons, and in editor. I provide visual proof of this issue, as well as files with Icons that i've used. They were converted through Inkscape, added to icomoon (they were displayed correctly on icomoon as well), the name in dart file was changed (so it would be displayed on uploaded file in flutterflow), and it was added to Theme Settings.

icomoon-v1.0 (34) 2.zip icomoon-v1.0 (32) 2.zip icomoon-v1.0 (31) 2.zip icomoon-v1.0 (30) 2.zip

[szymonpodwyszynski]

Hi! I was wondering if there are any updates on this case? Do i need to provide more information or some new files? Please let me know if you need anything from me, im happy to help. Me and my team are eager to resolve this issue, as its a bug that prevent us from going forward.

[szymonpodwyszynski]

Hello! I've found a solution to this problem. If anybody experiences the same issue, a fix to my instance was to put all icons in one file in Flutterflow. In the beginning, i was trying to put all icons in seperate files - to differentiate them based on their type (for example: General, Weather, Users, Naviagation, etc.) but i've noticed that a first file that i add to FF displays icons fine, but the next file that i add to Design System breaks something and the icons in this file are mismatching. In short - add all icons in one file, because FlutterFlow seems to have a problem with more than one file with custom icons.

[sbis04]

Hey @szymonpodwyszynski, I was just looking into the issue. One question, when you were using multiple files, were the icon files you uploaded having the exact same names?

[szymonpodwyszynski]

Hello, every file that i've uploaded had a different name, as well as icons - every icon was named differently.

[github-actions[bot]]

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.

[GeneralHoppy]

What can i do about this Icon problems

[takashiff]

@sbis04 It looks like this behavior only occurs under the following conditions:

1. Multiple different files with different icons
2. Multiple custom icons on the same page.

I tried recreating the bug with ~5 icons, and they all seemed to work fine. Will keep posting any updates if I find more information.

[szymonpodwyszynski]

Hello! Has there been any updates on this case? We've found a roundabout fix to this problem, but we would appreciate some updates on this issue as its not an ideal solution. Thanks

[ignalauret]

Hey @szymonpodwyszynski I'm sorry for the late response. I'm now reviewing your issue, and I'm able to add Multiple Icons from Multiple files on my project, and all of them look fine. Could you confirm if you are still getting this unexpected behaviour or if it got fixed on newer versions of FlutterFlow?

[szymonpodwyszynski]

Hey, i can confirm that i tried to reproduce this issue, and everything well correctly. It seems that some new update fixed our issue. Thanks

[duuetdev]

This problem seems to be existing still, I just faced this issue after deploying the app to web and ios. The icons are jumbled and some of them are not visible in both the light and dark modes of my app. Is there any solution to this?