fix(chip): conforms to ion-icon

fixes #15053

core/src/components.d.ts

@@ -468,7 +468,7 @@ declare global {
       /**
        * Set to `"clear"` for a transparent button style.
        */
-      'fill': string;
+      'fill': 'clear' | 'solid';
       /**
        * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
        */
@@ -492,6 +492,10 @@ declare global {
        * The icon to use. Possible values are the same as `"ion-icon"`.
        */
       'name': string;
+      /**
+       * The icon src to use. Possible values are the same as `"ion-icon"`.
+       */
+      'src': string;
     }
 
     interface IonChip {
@@ -4058,7 +4062,7 @@ declare global {
       /**
        * Set to `"clear"` for a transparent button style.
        */
-      'fill'?: string;
+      'fill'?: 'clear' | 'solid';
       /**
        * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
        */
@@ -4082,6 +4086,10 @@ declare global {
        * The icon to use. Possible values are the same as `"ion-icon"`.
        */
       'name'?: string;
+      /**
+       * The icon src to use. Possible values are the same as `"ion-icon"`.
+       */
+      'src'?: string;
     }
 
     export interface IonChipAttributes extends HTMLAttributes {

core/src/components/chip-button/chip-button.scss

@@ -4,24 +4,25 @@
 // --------------------------------------------------
 
 :host {
-  --background: var(--ion-color-base);
-  --color: var(--ion-color-contrast);
-  --size: #{$chip-button-size};
-  --icon-size: 18px;
   --ion-color-base: #{ion-color(primary, base)};
   --ion-color-contrast: #{ion-color(primary, contrast)};
+  --size: #{$chip-button-size};
 }
 
 :host(.chip-button-clear) {
-  --color: var(--ion-color-base);
+  --background: #{current-color(base)};
-  --background: transparent;
+
+  color: #{current-color(contrast)}
 }
 
-::slotted(ion-icon) {
+:host(.chip-button-clear) {
-  font-size: var(--icon-size);
+  --background: transparent;
+
+  color: #{current-color(base)};
 }
 
 .chip-button-native {
+  @include text-inherit();
   @include border-radius($chip-button-border-radius);
   @include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start);
 
@@ -35,7 +36,6 @@
   outline: none;
 
   background: var(--background);
-  color: var(--color);
   appearance: none;
 }
 

core/src/components/chip-button/chip-button.tsx

@@ -32,7 +32,7 @@ export class ChipButton {
   /**
    * Set to `"clear"` for a transparent button style.
    */
-  @Prop() fill = 'default';
+  @Prop() fill: 'clear' | 'solid' = 'solid';
 
   /**
    * Contains a URL or a URL fragment that the hyperlink points to.
@@ -54,6 +54,7 @@ export class ChipButton {
 
     return (
       <TagType
+        type="button"
         class="chip-button-native"
         disabled={this.disabled}
         href={this.href}>

core/src/components/chip-icon/chip-icon.scss

@@ -1,9 +1,6 @@
 @import "../../themes/ionic.globals";
 
 :host {
-  --ion-color-base: #{ion-color(primary, base)};
-  --ion-color-contrast: #{ion-color(primary, contrast)};
-
   @include border-radius(50%);
 
   display: inline-flex;
@@ -14,11 +11,14 @@
   width: var(--size, 32px);
   height: var(--size, 32px);
 
-  background-color: var(--ion-color-base);
+
+  background: #{ion-color(primary, base)};
+  color: #{ion-color(primary, contrast)};
+
+  font-size: 18px;
 }
 
-ion-icon {
+:host(.ion-color) {
-  color: var(--ion-color-contrast);
+  background: #{current-color(base)};
-
+  color: #{current-color(contrast)};
-  font-size: var(--icon-size, 18px);
 }

core/src/components/chip-icon/chip-icon.tsx

@@ -28,6 +28,12 @@ export class ChipIcon {
    */
   @Prop() name?: string;
 
+  /**
+   * The icon src to use.
+   * Possible values are the same as `"ion-icon"`.
+   */
+  @Prop() src?: string;
+
   hostData() {
     return {
       class: {
@@ -37,6 +43,6 @@ export class ChipIcon {
   }
 
   render() {
-    return <ion-icon name={this.name}/>;
+    return <ion-icon name={this.name} src={this.src} mode={this.mode}/>;
   }
 }