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
ionic-team · May 10, 2019 · 394cf8d · 394cf8d
1 parent a6cb5f2
commit 394cf8d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 34 deletions.
diff --git a/core/package.json b/core/package.json
@@ -30,7 +30,7 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "4.5.6"
+    "ionicons": "4.5.8"
   },
   "devDependencies": {
     "@stencil/core": "0.17.3-0",

diff --git a/core/src/components/icon/test/basic/index.html b/core/src/components/icon/test/basic/index.html
@@ -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;

diff --git a/core/src/components/icon/test/standalone/done-all.svg b/core/src/components/icon/test/standalone/done-all.svg
diff --git a/core/src/components/icon/test/standalone/index.html b/core/src/components/icon/test/standalone/index.html
@@ -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;