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
This commit is contained in:
Brandy Carney
2019-05-10 11:55:35 -04:00
committed by GitHub
parent a6cb5f218e
commit 394cf8d28f
4 changed files with 38 additions and 34 deletions

View File

@ -30,7 +30,7 @@
"loader/" "loader/"
], ],
"dependencies": { "dependencies": {
"ionicons": "4.5.6" "ionicons": "4.5.8"
}, },
"devDependencies": { "devDependencies": {
"@stencil/core": "0.17.3-0", "@stencil/core": "0.17.3-0",

View File

@ -177,7 +177,7 @@
<style> <style>
/*to ensure ng css encapsulation doesn't mess with icon attributes*/ /* to ensure ng css encapsulation doesn't mess with icon attributes */
code { code {
font-size: 0.8em; font-size: 0.8em;

View File

@ -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>

After

Width:  |  Height:  |  Size: 292 B

View File

@ -57,6 +57,9 @@
<ion-icon name="umbrella"></ion-icon> <ion-icon name="umbrella"></ion-icon>
<ion-icon name="rainy" color="primary"></ion-icon> <ion-icon name="rainy" color="primary"></ion-icon>
<!-- Custom Icon-->
<ion-icon src="./standalone/done-all.svg"></ion-icon>
<style> <style>
ion-icon { ion-icon {
font-size: 50px; font-size: 50px;