Skip to content

Commit 8d77fd1

Browse files
wuda-iowuda-io
committed
Merge branch 'v2-dev' of https://github.com/materializecss/materialize into v2-dev
2 parents bf29da7 + d1524ce commit 8d77fd1

File tree

9 files changed

+83
-36
lines changed

9 files changed

+83
-36
lines changed

‎pug/contents/chips_content.html

+6
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,12 @@ <h3 class="header">Options</h3>
161161
<td>''</td>
162162
<td>Set second placeholder when adding additional tags.</td>
163163
</tr>
164+
<tr>
165+
<td>closeIconClass</td>
166+
<td>String</td>
167+
<td>'material-icons'</td>
168+
<td>Specifies class to be used in "close" button (useful when working with Material Symbols icon set).</td>
169+
</tr>
164170
<tr>
165171
<td>autocompleteOptions</td>
166172
<td>Object</td>

‎pug/contents/icons_content.html

+57-26
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,69 @@
33
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
44

55
<div id="usage" class="scrollspy">
6-
<p class="caption">We use Google Material Icons by Google. They provide a <a href="https://jossef.github.io/material-design-icons-iconfont/">searchable list</a> (which we do not include in the documentation here), which will also show you the relevant icon names for the CSS classes. You can download the icons directly from the <a href="https://google.github.io/material-design-icons/#icon-font-for-the-web">Material Design specs</a>.</p>
6+
<p class="caption">We use Google Material Icons by Google. They provide a <a href="https://fonts.google.com/icons?icon.set=Material+Icons">searchable list</a> (which we do not include in the documentation here), which will also show you the relevant icon names for the CSS classes. You can download the icons directly from the <a href="https://google.github.io/material-design-icons/#icon-font-for-the-web">Material Design specs</a>.</p>
7+
<p class="caption">In addition to Material Icons, we also provide support to every variation of <a href="https://fonts.google.com/icons?icon.set=Material+Symbols">Material Symbols</a> set (outlined, rounded and sharp).</p>
78
<h3 class="header">Usage</h3>
8-
<p>To be able to use these icons, you must include this line in the <code class="language-markup">&lt;head></code>portion of your HTML code</p>
9+
<p>To be able to use these icons, you must include one of the following lines in the <code class="language-markup">&lt;head></code>portion of your HTML code</p>
910
<pre><code class="language-markup">
10-
&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></code></pre>
11-
<p>To use these icons, use the material-icons class on an element and provide the ligature as the text content.</p>
11+
&lt;!-- Material Icons --&gt;
12+
&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
13+
&lt;!-- Material Symbols - Outlined Set --&gt;
14+
&lt;link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
15+
&lt;!-- Material Symbols - Rounded Set --&gt;
16+
&lt;link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
17+
&lt;!-- Material Symbols - Sharp Set --&gt;
18+
&lt;link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" /></code></pre>
19+
<p>To use these icons, use either the material-icons class or the corresponding material-symbols set class on an element and provide the ligature as the text content.</p>
1220
<pre><code class="language-markup">
13-
&lt;i class="material-icons">add&lt;/i>
14-
</code></pre>
21+
&lt;i class="material-icons">add&lt;/i>
22+
&lt;!-- Use one of the following if opted by material symbols --&gt;
23+
&lt;i class="material-symbols-outlined">add&lt;/i>
24+
&lt;i class="material-symbols-rounded">add&lt;/i>
25+
&lt;i class="material-symbols-sharp">add&lt;/i>
26+
</code></pre>
1527

16-
<h5>Sizes</h5>
28+
<h5>Icon Sizes</h5>
1729
<p>To control the size of the icon, change the <code class="language-css">font-size: 30px</code> property of your icon. Optionally you can use preset classes as shown below.</p>
1830
<div class="row center-align">
19-
<div class="col s3"><i class="material-icons tiny icon-demo">insert_chart</i></div>
20-
<div class="col s3"><i class="material-icons small icon-demo">insert_chart</i></div>
21-
<div class="col s3"><i class="material-icons medium icon-demo">insert_chart</i></div>
22-
<div class="col s3"><i class="material-icons large icon-demo">insert_chart</i></div>
23-
24-
<div class="col s3"><p>Tiny</p></div>
25-
<div class="col s3"><p>Small</p></div>
26-
<div class="col s3"><p>Medium</p></div>
27-
<div class="col s3"><p>Large</p></div>
31+
<div class="s3"><i class="material-icons tiny icon-demo">insert_chart</i></div>
32+
<div class="s3"><i class="material-icons small icon-demo">insert_chart</i></div>
33+
<div class="s3"><i class="material-icons medium icon-demo">insert_chart</i></div>
34+
<div class="s3"><i class="material-icons large icon-demo">insert_chart</i></div>
35+
36+
<div class="s3"><p>Tiny</p></div>
37+
<div class="s3"><p>Small</p></div>
38+
<div class="s3"><p>Medium</p></div>
39+
<div class="s3"><p>Large</p></div>
40+
</div>
41+
42+
<h5>Symbol Sizes</h5>
43+
<div class="row center-align">
44+
<div class="s3"><i class="material-symbols-outlined tiny icon-demo">settings</i></div>
45+
<div class="s3"><i class="material-symbols-outlined small icon-demo">settings</i></div>
46+
<div class="s3"><i class="material-symbols-outlined medium icon-demo">settings</i></div>
47+
<div class="s3"><i class="material-symbols-outlined large icon-demo">settings</i></div>
48+
49+
<div class="s3"><p>Tiny</p></div>
50+
<div class="s3"><p>Small</p></div>
51+
<div class="s3"><p>Medium</p></div>
52+
<div class="s3"><p>Large</p></div>
2853
</div>
2954
<pre><code class="language-markup">
30-
&lt;!--
31-
Sizes:
32-
tiny: 1rem
33-
small: 2rem
34-
medium: 4rem
35-
large: 6rem
36-
-->
37-
&lt;i class="large material-icons">insert_chart&lt;/i>
38-
</code></pre>
55+
&lt;!--
56+
Sizes:
57+
tiny: 1rem
58+
small: 2rem
59+
medium: 4rem
60+
large: 6rem
61+
--&gt;
62+
&lt;!-- Material Icons --&gt;
63+
&lt;i class="large material-icons">insert_chart&lt;/i>
64+
&lt;!-- Material Symbols --&gt;
65+
&lt;i class="large material-symbols-outlined">insert_chart&lt;/i>
66+
&lt;i class="large material-symbols-rounded">insert_chart&lt;/i>
67+
&lt;i class="large material-symbols-sharp">insert_chart&lt;/i>
68+
</code></pre>
3969
</div>
4070
</div>
4171

@@ -47,7 +77,8 @@ <h5>Sizes</h5>
4777
<div style="height: 1px;">
4878
<ul class="section table-of-contents">
4979
<li><a href="#usage">Usage</a></li>
50-
<li><a href="https://jossef.github.io/material-design-icons-iconfont/">Search Google's Icons</a></li>
80+
<li><a href="https://fonts.google.com/icons?icon.set=Material+Icons">Search Google's Material Icons</a></li>
81+
<li><a href="https://fonts.google.com/icons?icon.set=Material+Symbols">Search Google's Material Symbols</a></li>
5182
</ul>
5283
</div>
5384
</div>

‎pug/includes/_head.pug

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ link(href='css/prism.css', rel='stylesheet')
2626
link(href='css/ghpages-materialize.css', type='text/css', rel='stylesheet', media='screen,projection')
2727
link(href='https://fonts.googleapis.com/css?family=Inconsolata', rel='stylesheet', type='text/css')
2828
link(href='https://fonts.googleapis.com/icon?family=Material+Icons', rel='stylesheet')
29+
link(href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet")
2930

3031
script.
3132
const theme = localStorage.getItem('theme');

‎sass/_style.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -530,7 +530,8 @@ $height: auto;
530530
}
531531

532532
// Icons
533-
.material-icons.icon-demo {
533+
.material-icons.icon-demo, .material-symbols-outlined.icon-demo,
534+
.material-symbols-rounded.icon-demo, .material-symbols-sharp.icon-demo {
534535
line-height: 50px;
535536
}
536537

@@ -886,7 +887,8 @@ body.parallax-demo footer {
886887
height: 32px;
887888
}
888889

889-
i.material-icons {
890+
i.material-icons, i.material-symbols-outlined,
891+
i.material-symbols-rounded, i.material-symbols-sharp {
890892
position: absolute;
891893
top: 4px;
892894
right: 34px;

‎sass/components/_global.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,8 @@ video.responsive-video {
210210

211211
i,
212212
[class^="mdi-"], [class*="mdi-"],
213-
i.material-icons {
213+
i.material-icons, i.material-symbols-outlined,
214+
i.material-symbols-rounded, i.material-symbols-sharp {
214215
display: block;
215216
float: left;
216217
font-size: 24px;
@@ -221,7 +222,7 @@ video.responsive-video {
221222
color: $font-on-primary-color-medium;
222223
vertical-align: top;
223224
display: inline-block;
224-
font-family: 'Material Icons';
225+
font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
225226
font-weight: normal;
226227
font-style: normal;
227228
font-size: 25px;

‎sass/components/_icons-material-design.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* This is needed for some mobile phones to display the Google Icon font properly */
2-
.material-icons {
2+
.material-icons, .material-symbols-outlined,
3+
.material-symbols-rounded, .material-symbols-sharp {
34
text-rendering: optimizeLegibility;
45
font-feature-settings: 'liga';
56
}

‎sass/components/_navbar.scss

+6-3
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ nav {
2727

2828
i,
2929
[class^="mdi-"], [class*="mdi-"],
30-
i.material-icons {
30+
i.material-icons, i.material-symbols-outlined,
31+
i.material-symbols-rounded, i.material-symbols-sharp {
3132
display: block;
3233
font-size: 24px;
3334
height: $navbar-height-mobile;
@@ -97,7 +98,8 @@ nav {
9798

9899
i,
99100
[class^="mdi-"], [class*="mdi-"],
100-
i.material-icons {
101+
i.material-icons, i.material-symbols-outlined,
102+
i.material-symbols-rounded, i.material-symbols-sharp {
101103
float: left;
102104
margin-right: 15px;
103105
}
@@ -145,7 +147,8 @@ nav {
145147
margin-right: 15px;
146148
display: inline-block;
147149

148-
& > .material-icons {
150+
& > .material-icons, & > .material-symbols-outlined,
151+
& > .material-symbols-rounded, & > .material-symbols-sharp {
149152
height: inherit;
150153
line-height: inherit;
151154
}

‎sass/components/_sidenav.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@
5959

6060
& > i,
6161
& > [class^="mdi-"], li > a > [class*="mdi-"],
62-
& > i.material-icons {
62+
& > i.material-icons, & > i.material-symbols-outlined,
63+
& > i.material-symbols-rounded, & > i.material-symbols-sharp {
6364
float: left;
6465
height: $sidenav-item-height;
6566
line-height: $sidenav-line-height;

‎src/chips.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ let _defaults = {
66
data: [],
77
placeholder: '',
88
secondaryPlaceholder: '',
9+
closeIconClass: 'material-icons',
910
autocompleteOptions: {},
1011
autocompleteOnly: false,
1112
limit: Infinity,
@@ -231,7 +232,7 @@ export class Chips extends Component {
231232
renderedChip.innerText = chip.text || chip.id;
232233
renderedChip.setAttribute('tabindex', "0");
233234
const closeIcon = document.createElement('i');
234-
closeIcon.classList.add('material-icons', 'close');
235+
closeIcon.classList.add(this.options.closeIconClass, 'close');
235236
closeIcon.innerText = 'close';
236237
// attach image if needed
237238
if (chip.image) {

0 commit comments

Comments
 (0)