shoelace-style/shoelace

<sl-icon color> inconsistencies

Open

#2,382 opened on Feb 20, 2025

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (922 forks)github user discovery
bughelp wanted

Repository metrics

Stars
 (13,867 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Describe the bug

The <sl-icon> docs say

Icons inherit their color from the current text color. Thus, you can set the color property on the element or an ancestor to change the color.

All of the examples in the docs show style="color: #...;", not color="...".

<sl-icon> itself does accept color and sets it on the element, but that has no effect:

sl-icon with color

The React wrapper also accepts color?: string, but it does nothing.

To Reproduce

Create an <sl=icon color="#fedcba">

Additional information

Recommended actions:

  1. change the documentation to describe style="color: ..." rather than color="...", consistent with the examples and the working code
  2. non-breaking change: if <sl-icon> receives a color, emit a warning message
  3. breaking change: remove color from the accepted attributes for <sl-icon> and <SlIcon>

Contributor guide

Research direction
Investigate how the <sl icon> component currently handles the color attribute. Check the source code to see if it sets the color property on the element and why it has no effect. Then propose a fix: either remove the color attribute or emit a warning when it's used, and update documentation to recommend using style="color" instead.
Tech stack
typescripthtmlcss
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
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.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Git
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70