Icons inherit. That single decision answers most theming questions before you ask them.

It follows currentColor

The SVG uses stroke="currentColor", so the icon takes the text color of whatever contains it. There is no color input, and that is on purpose: an input would be a second source of truth that drifts from the CSS around it.

neutral
cyan
violet

Same icon, same markup — only the container's color changes. Hover a swatch.

The consequence is convenient — change the container's color and the icon follows, including on hover, on focus, and inside a disabled button — and it is also the whole of the API. If you need a color the container does not have, set color on the icon in CSS like any other element.

Dark mode

Nothing to do. If your text is readable in both themes, so is the icon: it is the same color. That holds for any mechanism — a class on <html>, a data attribute, prefers-color-scheme — because the icon never reads the theme, only its inherited color.

Contrast is still yours to check. Inheriting the text color means inheriting its contrast problems too: an icon at 3:1 against the background fails the same threshold a graphic element has to meet.

Stroke width at small sizes

The default strokeWidth is 2, drawn in a 24-unit viewBox. Rendered at 24 px that is a clean 2 px line. Rendered at 16 px it is 1.33 px, and on a non-retina screen that lands between pixels and reads blurry.

16px · 1.5
24px · 2
32px · 2

Below 20 px, drop to [strokeWidth]="1.5". Above 32 px you can go the other way — 2 keeps looking thin as the icon grows. The value is an input precisely because the right answer depends on the size you render at, and only you know that.