Skip to content

Commit f412499

Browse files
crisbetojelbourn
authored andcommitted
fix(list): icon size in dense mode (#3913)
Fixes the size of icons inside dense lists. Fixes #3886.
1 parent 21cbf34 commit f412499

File tree

1 file changed

+10
-6
lines changed

1 file changed

+10
-6
lines changed

src/lib/list/list.scss

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
$mat-list-side-padding: 16px;
66
$mat-list-avatar-size: 40px;
7-
$mat-list-icon-size: 24px;
87

98
// Normal list variables
109
$mat-list-top-padding: 8px;
@@ -17,6 +16,7 @@ $mat-list-avatar-height: 56px;
1716
// spec requires two- and three-line lists be taller
1817
$mat-list-two-line-height: 72px;
1918
$mat-list-three-line-height: 88px;
19+
$mat-list-icon-size: 24px;
2020

2121
// Dense list variables
2222
$mat-dense-top-padding: 4px;
@@ -25,11 +25,12 @@ $mat-dense-base-height: 40px;
2525
$mat-dense-avatar-height: 48px;
2626
$mat-dense-two-line-height: 60px;
2727
$mat-dense-three-line-height: 76px;
28+
$mat-dense-list-icon-size: 20px;
2829

2930
// This mixin provides all list-item styles, changing font size and height
3031
// based on whether the list is in dense mode.
3132
@mixin mat-list-item-base($font-size, $base-height, $avatar-height,
32-
$two-line-height, $three-line-height) {
33+
$two-line-height, $three-line-height, $icon-size) {
3334

3435
// Prevents the wrapper `mat-list-item-content` from collapsing due to it
3536
// being `inline` by default.
@@ -84,8 +85,9 @@ $mat-dense-three-line-height: 76px;
8485
}
8586

8687
.mat-list-icon {
87-
width: $mat-list-icon-size;
88-
height: $mat-list-icon-size;
88+
width: $icon-size;
89+
height: $icon-size;
90+
font-size: $icon-size;
8991
border-radius: 50%;
9092
padding: 4px;
9193
}
@@ -128,7 +130,8 @@ $mat-dense-three-line-height: 76px;
128130
$mat-list-base-height,
129131
$mat-list-avatar-height,
130132
$mat-list-two-line-height,
131-
$mat-list-three-line-height
133+
$mat-list-three-line-height,
134+
$mat-list-icon-size
132135
);
133136

134137
@include mat-line-base($mat-list-secondary-font);
@@ -154,7 +157,8 @@ $mat-dense-three-line-height: 76px;
154157
$mat-dense-base-height,
155158
$mat-dense-avatar-height,
156159
$mat-dense-two-line-height,
157-
$mat-dense-three-line-height
160+
$mat-dense-three-line-height,
161+
$mat-dense-list-icon-size
158162
);
159163

160164
@include mat-line-base($mat-dense-font-size);

0 commit comments

Comments
 (0)