-
-
Notifications
You must be signed in to change notification settings - Fork 5
/
icons.html
133 lines (128 loc) · 5.57 KB
/
icons.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
{{> head }}
</head>
<body>
{{> navbar }}
<main>
{{> intro}}
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
<div id="usage" class="scrollspy">
<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>
<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>
<h3 class="header">Usage</h3>
<p>
To be able to use these icons, you must include one of the following lines in the
<code class="language-html">head</code> portion of your HTML code
</p>
<pre><code class="language-html">
<xmp><!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- Material Symbols - Outlined Set -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<!-- Material Symbols - Rounded Set -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
<!-- Material Symbols - Sharp Set -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />
</xmp>
</code></pre>
<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>
<pre><code class="language-html">
<xmp><i class="material-icons">add</i>
<!-- Use one of the following if opted by material symbols -->
<i class="material-symbols-outlined">add</i>
<i class="material-symbols-rounded">add</i>
<i class="material-symbols-sharp">add</i>
</xmp>
</code></pre>
<h5>Icon Sizes</h5>
<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>
<div class="row center-align">
<div class="s3">
<i class="material-icons tiny icon-demo">insert_chart</i>
</div>
<div class="s3">
<i class="material-icons small icon-demo">insert_chart</i>
</div>
<div class="s3">
<i class="material-icons medium icon-demo">insert_chart</i>
</div>
<div class="s3">
<i class="material-icons large icon-demo">insert_chart</i>
</div>
<div class="s3"><p>Tiny</p></div>
<div class="s3"><p>Small</p></div>
<div class="s3"><p>Medium</p></div>
<div class="s3"><p>Large</p></div>
</div>
<h5>Symbol Sizes</h5>
<div class="row center-align">
<div class="s3">
<i class="material-symbols-outlined tiny icon-demo">settings</i>
</div>
<div class="s3">
<i class="material-symbols-outlined small icon-demo">settings</i>
</div>
<div class="s3">
<i class="material-symbols-outlined medium icon-demo">settings</i>
</div>
<div class="s3">
<i class="material-symbols-outlined large icon-demo">settings</i>
</div>
<div class="s3"><p>Tiny</p></div>
<div class="s3"><p>Small</p></div>
<div class="s3"><p>Medium</p></div>
<div class="s3"><p>Large</p></div>
</div>
<pre><code class="language-html">
<xmp><!-- Sizes: tiny: 1rem, small: 2rem, medium: 4rem, large: 6rem -->
<!-- Material Icons -->
<i class="large material-icons">insert_chart</i>
<!-- Material Symbols -->
<i class="large material-symbols-outlined">insert_chart</i>
<i class="large material-symbols-rounded">insert_chart</i>
<i class="large material-symbols-sharp">insert_chart</i>
</xmp>
</code></pre>
</div>
</div>
<div class="col hide-on-small-only m3 xl3">
<div class="toc-wrapper">
<div style="height: 1px">
<ul class="section table-of-contents">
<li><a href="#usage">Usage</a></li>
<li>
<a href="https://fonts.google.com/icons?icon.set=Material+Icons">Search Google's Material Icons</a>
</li>
<li>
<a href="https://fonts.google.com/icons?icon.set=Material+Symbols">Search Google's Material Symbols</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
{{> footer }}
<script type="module" src="/src/main.ts"></script>
</body>
</html>