Temas y color
Los iconos heredan. Esa sola decisión responde la mayoría de las preguntas de tematización antes de que las hagas.
Sigue a currentColor
El SVG usa stroke="currentColor", así que el icono toma el color de texto de lo que lo contiene. No hay input color, y es a propósito: un input sería una segunda fuente de verdad que se separa del CSS que lo rodea.
Mismo icono, mismo markup — solo cambia el color del contenedor. Pasa el mouse sobre una muestra.
La consecuencia es cómoda —cambias el color del contenedor y el icono lo sigue, incluso en hover, en foco y dentro de un botón deshabilitado— y además es toda la API. Si necesitas un color que el contenedor no tiene, ponle color al icono en CSS como a cualquier otro elemento.
Modo oscuro
Nada que hacer. Si tu texto se lee en los dos temas, el icono también: es el mismo color. Eso vale con cualquier mecanismo —una clase en <html>, un atributo de datos, prefers-color-scheme— porque el icono nunca lee el tema, solo su color heredado.
El contraste sigue siendo cosa tuya. Heredar el color del texto es heredar también sus problemas de contraste: un icono a 3:1 contra el fondo falla el mismo umbral que tiene que cumplir un elemento gráfico.
Grosor del trazo en tamaños pequeños
El strokeWidth por defecto es 2, dibujado en un viewBox de 24 unidades. Renderizado a 24 px eso es una línea limpia de 2 px. Renderizado a 16 px son 1.33 px, y en una pantalla sin retina eso cae entre píxeles y se ve borroso.
Por debajo de 20 px, baja a [strokeWidth]="1.5". Por encima de 32 px puedes ir al revés — el 2 se sigue viendo fino conforme el icono crece. El valor es un input justamente porque la respuesta correcta depende del tamaño al que rendericas, y eso solo lo sabes tú.