Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issues in customizing color of SVG icon

See original GitHub issue

Bug Report

Ionic version: 4.10.0

Current behavior: When setting up the color the a custom SVG, part of the image does not get the color.

Expected behavior: The color should apply to the entire SVG shape.

Steps to reproduce:

Add icon svg to project in assets folder;
Set ion-icon tag to src to svg;
Set a custom color in variables.scss;
Check the icon in browser;

Related code:

Color definition to apply on click:

/** danger **/ --ion-color-danger: #dc2224; --ion-color-danger-rgb: 245, 61, 61; --ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast-rgb: 255, 255, 255; --ion-color-danger-shade: #d33939; --ion-color-danger-tint: #f25454;

Icon that we are applying to when clicking:

reveal_grey.svg.zip

Desired change in color:

Normal state:

New state:

Current result of code:

Other information:

We get the SVG from an Adobe XD file --> Design specs. Since this file wouldn’t work, we’ve tried all different ways to export in XD an SVG, but always got the same result. We also tried alternatively to export the SVG through all the different ways and types from Illustrator, but the results are always different and never the desired effect.

Ionic info:

➜  diningcity-assistant git:(master) ✗ ionic info

Ionic:

   ionic (Ionic CLI)             : 4.10.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : android 7.1.0, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 4 other plugins)

System:

   NodeJS : v11.8.0 (/usr/local/bin/node)
   npm    : 6.5.0
   OS     : macOS Mojave

➜  diningcity-assistant git:(master) ✗