ionic-team/ionicons

feat: configure whether or not to lazy load

Open

#925 opened on Jan 14, 2021

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (17,256 stars) (2,083 forks)batch import
help wantedtype: feature request

Description

I'm using an ion-icon in a dropdown interface, where a user has to click an element to show the dropdown's content. Because of how ionicons is implemented, the icons inside the dropdown are not loaded instantly because the request is performed when it is visible to the user.

This, of course, is not ideal, as it shows a flicker while the icons are not downloaded. Just like what happens when you set a background-image to an element in its :hover state.

Is there any way to force the load of invisible icons?

Contributor guide

Tech stack
typescriptcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScriptJavaScriptWeb performanceionicons internals
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Investigate the current lazy loading implementation in the ionicons source, likely in the icon component (e.g., src/components/icon/icon.tsx). Identify where the IntersectionObserver or scroll based loading is triggered and how to add a configuration option to disable it. Look for similar configuration patterns in the codebase for consistency. No linked PRs or maintainer responses are visible.