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.

Sign up for GitHub

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(icon): add --md-icon-size token #5150

Merged
merged 5 commits into from
Nov 14, 2023
Merged

feat(icon): add --md-icon-size token #5150

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8467d40
[icon_size] add size to tokens
scherler Nov 2, 2023
2d1afaa
[icon_size] fix expression
scherler Nov 3, 2023
65baa1a
[icon_size] drop fixed height and width
scherler Nov 3, 2023
57cec62
[icon_size] add note to the docu about the featuere
scherler Nov 3, 2023
b4c9b81
[icon_size] fix code regarding feedback
scherler Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 3 additions & 8 deletions docs/components/icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,9 @@ If using SVG icons, add an `aria-label` attribute to the SVG element.
Token | Default value
---------------- | -----------------------------
`--md-icon-font` | `'Material Symbols Outlined'`
`--md-icon-size` | `24px`

* [All tokens](https://github.com/material-components/material-web/blob/main/icon/internal/_md-comp-icon.scss)
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon.scss)
<!-- {.external} -->

### Example
Expand All @@ -157,13 +158,7 @@ Token | Default value
<style>
md-icon {
color: #006A6A;
font-size: 48px;
}
md-icon,
md-icon > * {
/* Resizes any slotted images or SVGs */
width: 48px;
height: 48px;
--md-icon-size: 48px;
}
.rounded {
--md-icon-font: 'Material Symbols Rounded';
Expand Down
9 changes: 5 additions & 4 deletions icon/internal/_icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,16 @@

@mixin styles() {
$tokens: tokens.md-comp-icon-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-icon-#{$token}, #{$value}));
}

:host {
font-size: 24px;
width: 24px;
height: 24px;
asyncLiz marked this conversation as resolved.
Show resolved Hide resolved
font-size: map.get($tokens, size);
color: inherit;
font-variation-settings: inherit;
font-weight: 400;
font-family: var(--md-icon-font, #{map.get($tokens, font)});
font-family: map.get($tokens, font);
Copy link
Collaborator

Choose a reason for hiding this comment

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

Can you add single quotes around the keys in map.get?

map.get($tokens, 'font');

display: inline-flex;
font-style: normal;
line-height: 1;
Expand Down
2 changes: 2 additions & 0 deletions tokens/_md-comp-icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@
$supported-tokens: (
// go/keep-sorted start
'font',
'size',
// go/keep-sorted end
);

@function _get-new-tokens($exclude-hardcoded-values) {
@return (
// go/keep-sorted start
font: if($exclude-hardcoded-values, null, 'Material Symbols Outlined'),
size: if($exclude-hardcoded-values, null, '24px'),
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I am not sure about whether this is the correct way to set the default

Copy link
Contributor Author

@scherler scherler Nov 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I think it is correct, however, the default font is actually not injected font-family: var(--md-icon-font,); which you can see in current main branch

Copy link
Collaborator

Choose a reason for hiding this comment

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

This looks correct, but you'll want to remove the string quotes around the pixel value

size: if($exclude-hardcoded-values, null, 24px),

// go/keep-sorted end
);
}
Expand Down