ionic-team / ionic-team/ionicons

Can you expose a part="svg" for the SVG content

Open
#960 5 comments 9 reactions 0 assignees View on GitHub
help wanted
Dominant language
TypeScript
Stars
18.2k
Forks
2.1k
PR merge metrics
No merged PRs in 30d

Description

When using it with custom icons : ``
Because of the Shadow DOM we can't style at all the content of the SVG. Any custom SVG used is always a square because of the this css lines :
https://github.com/ionic-team/ionicons/blob/8c2a507fcff2cb5f2edff60357ffd7feb70bb987/src/components/icon/icon.css#L27-L34
By adding a `part="svg"` it would be possible to have more flexibility to style the SVG from the outside. In my case setting height to auto, but it could be to change the color of a specific path or anything else.

Contributor guide

Open the contributing guide

Research direction

Start with src/components/icon/icon.css lines 27-34 and the icon component rendering used by . Confirm how the custom SVG is inserted, then expose the SVG with part="svg" so callers can style it from outside the Shadow DOM. Done means external styling can target the SVG, including changing its sizing behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.