Custom icons have a small stroke applied to them

[brane53]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.4.0 (C:\Users\Brane\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v10.10.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Describe the Bug

When rendering a custom icon via <ion-icon src="/path/to/svg.svg"></ion-icon> a noticeble stroke gets applied to the svg icon. This makes the icon not appear as intended and even has some undesired side effects on certain icons as in the case with the done_all material design icon explained below.

Steps to Reproduce

1. Generate a new ionic project ionic start iconBug blank --type="angular"
2. Create a new svg file src/assets/icon/done_all.svg with the following contents

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/></svg>

3. In src/app/home/home.page.html replace the contents of ion-content with:
   <ion-icon src="/assets/icon/done_all.svg"></ion-icon>
4. Run ionic serve

You should see the icon rendered with a thin border around it. As well the icon itself has a little bit of stroke added to it as well.

Expected Behavior
The icon should not have this stroke added. ion-icon should render the svg as it is suppose to be. In this case the icon in question is the done_all icon from Google's Material Design Icons. The icon should appear as it does on google's site; with no border around the icon or added stroke.

Additional Info
This is currently happening with all material design icon svg files. When inspecting the element in devtools the stroke is being set in teh shadow dom as follows:

.icon-inner, svg {
  display: block;
  fill: currentColor;
  stroke: currentColor;
  height: 100%;
  width: 100%;
}

I've implemented a workaround where I add style="stroke:none" or stroke-width="0" to the svg element directly. This works, but I feel like the default should be for ionic to leave the svg as is and not change its stroke.

[brandyscarney]

Thanks for the issue! We'll look into this.

Note to team: this is technically an issue in the ionicons repository but I didn't want it to get lost over there.

Here is the code in question: https://github.com/ionic-team/ionicons/blob/master/src/components/icon/icon.css#L28-L29

[Mazus]

Hey,
What's the actual workaround for this ? Am I suppose to add (style = "stroke:none") to the ion-icon ?
Why can't I override .icon-inner, svg in the global.scss ?

[Mazus]

Hi @brane53 ,
Can you explain how you implemented the workaround. I'm struggling to understand how shadow dom is working, but as said on google docs, outside style applied to an element should override shadow DOM, still I can't find the proper selector to do this, I tried to apply it to svg, .icon-inner, ::slotted(*)... etc nothing works except when I manually disable the stroke property in devTools.

How are you doing it ?

Thanks a lot

[Mazus]

@brandyscarney anything new about this issue ?

[kaspaddy]

@Mazus
if you have direct access to the svg files, a current workaround would be adding a style atrribute the the svg image:
for example turn

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> 
<path fill="#FFD64F" fill-rule="nonzero" d="M8.593 8.138l2.274-6.442.005-.014a1.206 1.206 0 0 1 2.264.014l2.272 6.442h6.386a1.206 1.206 0 0 1 .775 2.13l-5.383 4.463 2.257 6.778a1.206 1.206 0 0 1-1.858 1.353L12 18.765l-5.592 4.102a1.206 1.206 0 0 1-1.85-1.358l2.257-6.778-5.393-4.47a1.206 1.206 0 0 1 .784-2.123h6.387z"/>
</svg>

to

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="stroke: none !important;">
    <path fill="#FFD64F" fill-rule="nonzero" d="M8.593 8.138l2.274-6.442.005-.014a1.206 1.206 0 0 1 2.264.014l2.272 6.442h6.386a1.206 1.206 0 0 1 .775 2.13l-5.383 4.463 2.257 6.778a1.206 1.206 0 0 1-1.858 1.353L12 18.765l-5.592 4.102a1.206 1.206 0 0 1-1.85-1.358l2.257-6.778-5.393-4.47a1.206 1.206 0 0 1 .784-2.123h6.387z"/>
</svg>

[brane53]

@Mazus
Appologies for the late reply. I added the style directly to the svg file as @kaspaddy suggests. It's a total hack, but it works. Ionic is going to pull in that svg file into the ion-icon element's shadow dom at which point there is no way to change the style via css unless ionic exposes a custom css variable. I thought that this was close to being implemented though. There's a pull request by @btsiders to add a css variable, but nothing has been done about it. ionic-team/ionicons#643

[Mazus]

@brane53 @kaspaddy Thanks a lot, that works perfectly fine for now.
Until the css variable is properly merged in Ionic, that will do :)

[eyexpo-dan]

Issue persists on most custom svg I have encountered still.

[LayZeeDK]

Here's an Angular directive to fix the issue until the Ionic team merges a bugfix.

removeSvgStroke directive

import { isPlatformBrowser } from '@angular/common';
import {
  AfterViewInit,
  Directive,
  ElementRef,
  Inject,
  OnDestroy,
  PLATFORM_ID,
} from '@angular/core';

@Directive({
  selector: 'ion-icon[src][removeSvgStroke]',
})
export class RemoveIonIconSvgStrokeDirective
implements AfterViewInit, OnDestroy {
  private _noStrokeStyles?: HTMLStyleElement;
  private get ionIconShadowDom() {
    return (this.element.nativeElement as HTMLElement).shadowRoot;
  }
  private isBrowser: boolean;
  private get noStrokeStyles() {
    if (!this._noStrokeStyles) {
      this._noStrokeStyles = document.createElement('style');
      this._noStrokeStyles.innerHTML = `
      svg,
      .icon-inner {
        stroke: initial;
      }`;
    }

    return this._noStrokeStyles;
  }

  constructor(
    private element: ElementRef,
    @Inject(PLATFORM_ID) platformId: string,
  ) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  ngAfterViewInit() {
    if (this.isBrowser) {
      this.applyNoStrokeStyles();
    }
  }

  ngOnDestroy() {
    if (this.isBrowser) {
      this.removeNoStrokeStyles();
    }
  }

  private applyNoStrokeStyles() {
    // We have to wait for an event loop tick before the Ionic Icon shadow DOM
    // becomes accessible
    return Promise.resolve()
      .then(() => this.ionIconShadowDom.appendChild(this.noStrokeStyles));
  }

  private removeNoStrokeStyles() {
    this.ionIconShadowDom.removeChild(this.noStrokeStyles);
  }
}

Example usage

<ion-icon src="/assets/my-icon.svg" removeSvgStroke></ion-icon>

[javiersoto15]

Here's an Angular directive to fix the issue until the Ionic team merges a bugfix.

removeSvgStroke directive

import { isPlatformBrowser } from '@angular/common';
import {
  AfterViewInit,
  Directive,
  ElementRef,
  Inject,
  OnDestroy,
  PLATFORM_ID,
} from '@angular/core';

@Directive({
  selector: 'ion-icon[src][removeSvgStroke]',
})
export class RemoveIonIconSvgStrokeDirective
implements AfterViewInit, OnDestroy {
  private _noStrokeStyles?: HTMLStyleElement;
  private get ionIconShadowDom() {
    return (this.element.nativeElement as HTMLElement).shadowRoot;
  }
  private isBrowser: boolean;
  private get noStrokeStyles() {
    if (!this._noStrokeStyles) {
      this._noStrokeStyles = document.createElement('style');
      this._noStrokeStyles.innerHTML = `
      svg,
      .icon-inner {
        stroke: initial;
      }`;
    }

    return this._noStrokeStyles;
  }

  constructor(
    private element: ElementRef,
    @Inject(PLATFORM_ID) platformId: string,
  ) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  ngAfterViewInit() {
    if (this.isBrowser) {
      this.applyNoStrokeStyles();
    }
  }

  ngOnDestroy() {
    if (this.isBrowser) {
      this.removeNoStrokeStyles();
    }
  }

  private applyNoStrokeStyles() {
    // We have to wait for an event loop tick before the Ionic Icon shadow DOM
    // becomes accessible
    return Promise.resolve()
      .then(() => this.ionIconShadowDom.appendChild(this.noStrokeStyles));
  }

  private removeNoStrokeStyles() {
    this.ionIconShadowDom.removeChild(this.noStrokeStyles);
  }
}

Example usage

<ion-icon src="/assets/my-icon.svg" removeSvgStroke></ion-icon>

i have an error in the directive spec.ts file, about not passing arguments to the directive, how could i fix it?

[LayZeeDK]

i have an error in the directive spec.ts file, about not passing arguments to the directive, how could i fix it?

What does your spec look like?

[javiersoto15]

i have an error in the directive spec.ts file, about not passing arguments to the directive, how could i fix it?

What does your spec look like?

import { RemoveIonIconSvgStrokeDirective } from './remove-ion-icon-svg-stroke.directive'; describe('RemoveIonIconSvgStrokeDirective', () => { it('should create an instance', () => { const directive = new RemoveIonIconSvgStrokeDirective(); expect(directive).toBeTruthy(); }); });

[LayZeeDK]

@javiersoto15 The directive has two dependencies, seen in its constructor:

• ElementRef from @angular/core
• PLATFORM_ID from @angular/core

In your test case, you do not pass any arguments to its constructor.

To test it, you should create a test host component with this template

<ion-icon src="/assets/my-icon.svg" removeSvgStroke></ion-icon>

then declare it in the testing module and finally create a component fixture. This will set up the dependencies for you. However, it only does DOM manipulation on the browser platform. Not sure what platform is used in tests. Maybe it depends on whether you use Karma or a browserless environment like Jest or Mocha.

[javiersoto15]

@javiersoto15 The directive has two dependencies, seen in its constructor:

• ElementRef from @angular/core
• PLATFORM_ID from @angular/core

In your test case, you do not pass any arguments to its constructor.

To test it, you should create a test host component with this template

<ion-icon src="/assets/my-icon.svg" removeSvgStroke></ion-icon>

then declare it in the testing module and finally create a component fixture. This will set up the dependencies for you. However, it only does DOM manipulation on the browser platform. Not sure what platform is used in tests. Maybe it depends on whether you use Karma or a browserless environment like Jest or Mocha.

I applied the directive but it does not seem to action any change in my svg, i have applied it to difference but there is no difference

[LayZeeDK]

Which version of Ionic do you use? This is for @ionic/angular v4.x.

[brandyscarney]

Thank you for the easy-to-follow steps to reproduce this! I've created two pull requests for this:

• Ionicons: fix(icon): set fill on host element and remove stroke ionicons#688
• Ionic: fix(icon): remove stroke and move fill to host element #18241

I also published an Ionicons dev build which I am currently testing: [email protected]. So far the colors are all looking fine in Ionic.

If anyone would like to test this out please do so and let me know if you see any problems with this approach, thank you!

[brandyscarney]

I released a dev build of Ionic with this fix in if anyone would like to try it:

4.5.0-dev.201905101544.3041241

The fix will be in the next release. Thanks again for reporting! 🙂

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.