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

core/package.json

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

core/src/components/icon/test/basic/index.html

@@ -26,8 +26,8 @@
           <ion-icon name="home" id="dynamicColor" slot="start"></ion-icon>
           <ion-label>
             <code>
-                name="home"
-              </code>
+              name="home"
+            </code>
           </ion-label>
         </ion-item>
 
@@ -35,8 +35,8 @@
           <ion-icon name="home" slot="start"></ion-icon>
           <ion-label>
             <code>
-                name="home"
-              </code>
+              name="home"
+            </code>
           </ion-label>
         </ion-item>
 
@@ -44,8 +44,8 @@
           <ion-icon id="dynamicHomeIcon" slot="start"></ion-icon>
           <ion-label>
             <code>
-                id="dynamicHomeIcon"
-              </code>
+              id="dynamicHomeIcon"
+            </code>
           </ion-label>
         </ion-item>
 
@@ -53,8 +53,8 @@
           <ion-icon name="md-home" slot="start"></ion-icon>
           <ion-label>
             <code>
-                name="md-home"
-              </code>
+              name="md-home"
+            </code>
           </ion-label>
         </ion-item>
 
@@ -62,8 +62,8 @@
           <ion-icon name="ios-home" slot="start"></ion-icon>
           <ion-label>
             <code>
-                name="ios-home"
-              </code>
+              name="ios-home"
+            </code>
           </ion-label>
         </ion-item>
 
@@ -71,8 +71,8 @@
           <ion-icon name="ios-home" slot="end"></ion-icon>
           <ion-label>
             <code>
-                name="ios-home"
-              </code>
+              name="ios-home"
+            </code>
           </ion-label>
         </ion-item>
 
@@ -80,8 +80,8 @@
           <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>
 
@@ -89,8 +89,8 @@
           <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>
 
@@ -98,8 +98,8 @@
           <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>
 
@@ -107,8 +107,8 @@
           <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>
 
@@ -116,8 +116,8 @@
           <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>
 
@@ -125,8 +125,8 @@
           <ion-icon name="color-filter" slot="start"></ion-icon>
           <ion-label>
             <code>
-                name="color-filter"
-              </code>
+              name="color-filter"
+            </code>
           </ion-label>
         </ion-item>
 
@@ -134,8 +134,8 @@
           <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>
 
@@ -143,8 +143,8 @@
           <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>
 
@@ -152,16 +152,16 @@
           <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;

core/src/components/icon/test/standalone/done-all.svg

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

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;