Skip to content

Commit a4bfc96

Browse files
committed
chore(md-chip): filter chip trailing icon can now be customized
1 parent a6d984a commit a4bfc96

File tree

2 files changed

+11
-5
lines changed

2 files changed

+11
-5
lines changed

chips/internal/_trailing-icon.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,16 @@
2828
padding-inline-end: 0;
2929
}
3030

31-
.trailing.icon {
31+
.trailing.icon, [name="trailing-icon"]::slotted(*) {
3232
color: var(--_trailing-icon-color);
3333
height: var(--_icon-size);
3434
width: var(--_icon-size);
3535
}
3636

37+
[name="trailing-icon"]::slotted(md-icon) {
38+
--md-icon-size: var(--_icon-size);
39+
}
40+
3741
:where(:hover) .trailing.icon {
3842
color: var(--_hover-trailing-icon-color);
3943
}

chips/internal/trailing-icons.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,12 @@ export function renderRemoveButton({
3434
@focus=${focusListener}>
3535
<md-focus-ring part="trailing-focus-ring"></md-focus-ring>
3636
<md-ripple ?disabled=${disabled}></md-ripple>
37-
<svg class="trailing icon" viewBox="0 96 960 960" aria-hidden="true">
38-
<path
39-
d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
40-
</svg>
37+
<slot name="trailing-icon">
38+
<svg class="trailing icon" viewBox="0 96 960 960" aria-hidden="true">
39+
<path
40+
d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
41+
</svg>
42+
</slot>
4143
<span class="touch"></span>
4244
</button>
4345
`;

0 commit comments

Comments
 (0)