diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss index 6c9d95a5c1..6eadfdf906 100644 --- a/core/src/components/item-divider/item-divider.md.scss +++ b/core/src/components/item-divider/item-divider.md.scss @@ -43,12 +43,15 @@ // -------------------------------------------------- ::slotted(ion-icon) { - color: $item-md-icon-slot-color; font-size: $item-md-icon-slot-font-size; } +:host(.ion-color) ::slotted(ion-icon) { + color: current-color(contrast); +} + ::slotted(ion-icon[slot]) { @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start); } diff --git a/core/src/components/item-divider/test/preview/index.html b/core/src/components/item-divider/test/preview/index.html index 686cfcdfda..f0d09880da 100644 --- a/core/src/components/item-divider/test/preview/index.html +++ b/core/src/components/item-divider/test/preview/index.html @@ -29,6 +29,13 @@ + + + Divider with a slotted icon + + + + Divider in List diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index bc87126498..0e37905a49 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -104,6 +104,10 @@ font-size: $item-md-icon-slot-font-size; } +:host(.ion-color) ::slotted(ion-icon) { + color: current-color(contrast); +} + ::slotted(ion-icon[slot]) { @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start); } diff --git a/core/src/components/item/test/icons/index.html b/core/src/components/item/test/icons/index.html index 170e85509d..68480f236d 100644 --- a/core/src/components/item/test/icons/index.html +++ b/core/src/components/item/test/icons/index.html @@ -21,6 +21,14 @@ + + + + ion-item w/ color + + + + ion-item [detail] attr