Ionicons: definindo a cor do traço

Criado em 18 fev. 2020 · 11Comentários · Fonte: ionic-team/ionicons

Estou usando o ícone contorno de pessoas usando o HTML:
<ion-icon name="people-outline" class="overviewIcon" style="color: blue;"></ion-icon>

A cor permanece preta mesmo com o estilo. Como posso alterar a cor da borda ou a cor de preenchimento do ícone?

Fonte

noorbakerally

Comentários muito úteis

O problema é o seguinte, eu acho: a maioria dos ícones de contorno tem caminho definido com stroke:#000; fixo, portanto, eles sempre são renderizados em preto.

Eles provavelmente devem ser modificados com stroke:currentColor; , se não estou errado.

Forneci um PR # 805 para corrigir esse problema.

peterpeterparker em 15 mar. 2020

👍7

Todos 11 comentários

Posso confirmar esse problema no meu projeto Angular.

Parece que é diferente para cada ícone. Por exemplo, menu-sharp muda para branco por css enquanto menu não muda?

andreas-aeschlimann em 19 fev. 2020

Também posso confirmar que estou tendo esse problema em meu projeto de aplicação iônica.

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

Alguns ícones parecem funcionar bem, mas percebi quando um ícone estava faltando em uma página e descobri que esse ícone foi excluído / renomeado, então escolhi um ícone semelhante para substituí-lo, anexando a mesma classe a ele.

<ion-icon class="arrow" name="chevron-back"></ion-icon>

ion-icon.arrow {
    color: var(--ion-color-default) !important;
    vertical-align: middle;
}

A classe acima não parece funcionar. Até substituí a variável apenas pela cor vermelha e isso não adiantou.

É estranho que alguns ícones funcionem normalmente e que também funcionassem antes de eu começar a usar a nova versão. Eu realmente apreciaria uma correção neste ASAP.

aecvargas em 21 fev. 2020

Sim...

Este problema é provavelmente uma duplicata de # 778. Você pode usar o filtro de propriedade CSS para inverter a cor para branco, pelo menos.

andreas-aeschlimann em 21 fev. 2020

👍1

Precisa da atenção do desenvolvedor sobre isso !! Parece que muitos ícones SVG têm cores de traço codificadas, o que é realmente irritante.

streamliner18 em 8 mar. 2020

O mesmo aqui, não posso usar por causa disso :(

zenorocha em 9 mar. 2020

O problema é o seguinte, eu acho: a maioria dos ícones de contorno tem caminho definido com stroke:#000; fixo, portanto, eles sempre são renderizados em preto.

Eles provavelmente devem ser modificados com stroke:currentColor; , se não estou errado.

Forneci um PR # 805 para corrigir esse problema.

peterpeterparker em 15 mar. 2020

👍7

Concorde com @peterpeterparker . Existem poucos ícones com stroke:#000 por causa dos quais o estilo do ícone de íon não está funcionando.

boradakash em 8 abr. 2020

👍1

817 também faz referência a este

hades200082 em 18 abr. 2020

Experimente isto:

[ionicons] Deprecated script, please remove: <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
To improve performance it is recommended to set the differential scripts in the head as follows:
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>