Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(switch): add slot icons #5241

Merged

Conversation

mavyfaby
Copy link
Contributor

@mavyfaby mavyfaby commented Nov 30, 2023

Fixes #4549

As per issue #4549, I added icon slots in switch component:

Example (icons using slots)

<md-switch icons>
  <md-icon slot="off-icon">
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480.028-371q45.428 0 77.2-31.8Q589-434.6 589-480.028t-31.8-77.2Q525.4-589 479.972-589t-77.2 31.8Q371-525.4 371-479.972t31.8 77.2Q434.6-371 480.028-371ZM480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM205.5-434.5h-171v-91h171v91Zm720 0h-171v-91h171v91Zm-491-320v-171h91v171h-91Zm0 720v-171h91v171h-91ZM255.761-641.869 147.348-746.522l64.413-67.13 104.13 107.174-60.13 64.609Zm492.478 495.521-105.13-108.174L704-317.652l108.652 104.174-64.413 67.13ZM642.348-704l104.174-108.652 67.13 64.413-107.174 104.13L642.348-704Zm-496 492.239 108.174-105.13L317.652-256 213.478-147.348l-67.13-64.413ZM480-480Z"/></svg>
  </md-icon>
  <md-icon slot="on-icon">
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M479.958-116.413q-151.477 0-257.511-106.034-106.034-106.034-106.034-257.511 0-151.477 106.046-257.672Q328.505-843.826 480-843.826q13.283 0 26.304.88 13.022.881 25.544 2.881-38.131 29.956-61.076 75.141-22.946 45.185-22.946 97.272 0 91.694 64.325 155.879 64.326 64.186 156.219 64.186 52.608 0 97.413-22.826 44.804-22.826 74.521-60.957 1.761 12.522 2.642 25.235.88 12.712.88 25.896 0 151.435-106.196 257.63-106.195 106.196-257.672 106.196Zm.042-91q81.782 0 147.956-43.717 66.174-43.718 98.413-114.783-17.608 4.044-35.217 6.326-17.609 2.283-34.978 1.805-122.044-4.066-207.946-89.37t-90.446-209.261q-.239-17.369 1.924-34.978t6.446-34.978q-70.826 32.478-114.782 98.652Q207.413-561.543 207.413-480q0 112.929 79.829 192.758Q367.071-207.413 480-207.413Zm-13.109-259.478Z"/></svg>
  </md-icon>
</md-switch>

Off Icon

Dark Mode Light Mode
image image

On Icon

Dark Mode Light Mode
image image

Example (default icons fallback)

<md-switch icons></md-switch>

Off Icon

Dark Mode Light Mode
image image

On Icon

Dark Mode Light Mode
image image

Example (no icons)

<md-switch></md-switch>

Off Icon

Dark Mode Light Mode
image image

On Icon

Dark Mode Light Mode
image image

Copy link
Collaborator

@asyncLiz asyncLiz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this! Left a bit of feedback :)

switch/internal/_icon.scss Outdated Show resolved Hide resolved
switch/internal/_icon.scss Show resolved Hide resolved
switch/internal/_icon.scss Outdated Show resolved Hide resolved
@mavyfaby mavyfaby requested a review from asyncLiz November 30, 2023 22:46
Copy link
Collaborator

@asyncLiz asyncLiz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Thanks a bunch for the contribution

@copybara-service copybara-service bot merged commit 77fd177 into material-components:main Dec 1, 2023
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request] Custom icons state for md-switch
2 participants