Skip to content
Permalink
Browse files

fix(icon): remove stroke and move fill to host element (#18241)

This removes the weird border around custom SVGs used in an ion-icon.

fixes #16483
  • Loading branch information...
brandyscarney committed May 10, 2019
1 parent a6cb5f2 commit 394cf8d28fbb482b1980f15ba040779140cd3be9
@@ -30,7 +30,7 @@
"loader/"
],
"dependencies": {
"ionicons": "4.5.6"
"ionicons": "4.5.8"
},
"devDependencies": {
"@stencil/core": "0.17.3-0",
@@ -26,142 +26,142 @@
<ion-icon name="home" id="dynamicColor" slot="start"></ion-icon>
<ion-label>
<code>
name="home"
</code>
name="home"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>
<code>
name="home"
</code>
name="home"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon id="dynamicHomeIcon" slot="start"></ion-icon>
<ion-label>
<code>
id="dynamicHomeIcon"
</code>
id="dynamicHomeIcon"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon name="md-home" slot="start"></ion-icon>
<ion-label>
<code>
name="md-home"
</code>
name="md-home"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon name="ios-home" slot="start"></ion-icon>
<ion-label>
<code>
name="ios-home"
</code>
name="ios-home"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon name="ios-home" slot="end"></ion-icon>
<ion-label>
<code>
name="ios-home"
</code>
name="ios-home"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon name="ios-star-outline" slot="start"></ion-icon>
<ion-label>
<code>
name="ios-star-outline"
</code>
name="ios-star-outline"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon name="IOS-STAR-OUTLINE" slot="end"></ion-icon>
<ion-label>
<code>
name="IOS-STAR-OUTLINE"
</code>
name="IOS-STAR-OUTLINE"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon name="md-home" color="primary" slot="start"></ion-icon>
<ion-label>
<code>
name="md-home"
</code>
name="md-home"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon name="logo-twitter" color="secondary" slot="start"></ion-icon>
<ion-label>
<code>
name="logo-twitter"
</code>
name="logo-twitter"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon ios="logo-apple" md="logo-android" slot="start"></ion-icon>
<ion-label>
<code>
ios="logo-apple" md="logo-android"
</code>
ios="logo-apple" md="logo-android"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon name="color-filter" slot="start"></ion-icon>
<ion-label>
<code>
name="color-filter"
</code>
name="color-filter"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon ios="ios-color-filter" md="md-color-filter" slot="start"></ion-icon>
<ion-label>
<code>
ios="ios-color-filter" md="md-color-filter"
</code>
ios="ios-color-filter" md="md-color-filter"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER" slot="start"></ion-icon>
<ion-label>
<code>
ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER"
</code>
ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER"
</code>
</ion-label>
</ion-item>

<ion-item>
<ion-icon slot="start"></ion-icon>
<ion-label>
<code>
name="null"
</code>
name="null"
</code>
</ion-label>
</ion-item>

<ion-item detail="true">
<ion-label>
<code>
ion-item w/ [detail="true"] attr. text text text text text text
</code>
ion-item w/ [detail="true"] attr. text text text text text text
</code>
</ion-label>
</ion-item>
</ion-list>
@@ -177,7 +177,7 @@


<style>
/*to ensure ng css encapsulation doesn't mess with icon attributes*/
/* to ensure ng css encapsulation doesn't mess with icon attributes */
code {
font-size: 0.8em;
@@ -0,0 +1 @@
<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>
@@ -57,6 +57,9 @@
<ion-icon name="umbrella"></ion-icon>
<ion-icon name="rainy" color="primary"></ion-icon>

<!-- Custom Icon-->
<ion-icon src="./standalone/done-all.svg"></ion-icon>

<style>
ion-icon {
font-size: 50px;

0 comments on commit 394cf8d

Please sign in to comment.
You can’t perform that action at this time.