ionic-team/ionicons

Overlay / Stacked Icons Support

Open

#367 opened on Mar 28, 2016

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

Description

Is there a way to stack ionicons to make more complex icons? Looking for exact same functionality as fontawesome supports with class= "icon-stack".

Example from fontawesome:

<span class="icon-stack">
  <i class="icon-camera"></i>
  <i class="icon-ban-circle icon-stack-base text-error"></i>
</span>

font awesome examples 2016-03-28 10-35-58

Contributor guide

Tech stack
csshtmltypescript
Domain
frontenddesign
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.
1-3 hours
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.
mostly clear
Prerequisites
CSS knowledgeHTML knowledgeIonicons library structure
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
Review how FontAwesome implements stacking (see their icon stack class). Investigate Ionicons' current icon rendering system (likely in src/ or components/). Check if there are existing issues or discussions on stacked icons. The issue has 28 reactions indicating interest, so this feature is desired. Implementation could involve creating a stacked icon container component and adjusting CSS for absolute positioning.