or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

Files

docs

build-system.mdindex.mdindividual-assets.mdnodejs-api.mdsprites.mdweb-fonts.md

web-fonts.mddocs/

0
# Web Font Integration
1


2
Material Design Icons provides pre-built web fonts for easy integration in web applications. Icons can be used as font characters with CSS classes or accessed via Google Fonts CDN.
3


4
## Capabilities
5


6
### Google Fonts CDN Integration
7


8
The simplest way to use Material Design Icons in web applications.
9


10
```html { .api }
11
<!-- Include Google Fonts CDN link in HTML head -->
12
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
13


14
<!-- Use icons with CSS class -->
15
<i class="material-icons">icon_name</i>
16
```
17


18
**Usage Examples:**
19


20
```html
21
<!DOCTYPE html>
22
<html>
23
<head>
24
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
25
</head>
26
<body>
27
  <!-- Basic icon usage -->
28
  <i class="material-icons">home</i>
29
  <i class="material-icons">menu</i>
30
  <i class="material-icons">search</i>
31
  
32
  <!-- Icons in buttons -->
33
  <button><i class="material-icons">add</i> Add Item</button>
34
  
35
  <!-- Styled icons -->
36
  <i class="material-icons" style="font-size: 48px; color: blue;">favorite</i>
37
</body>
38
</html>
39
```
40


41
### Local Font Files
42


43
Use the included font files for offline applications or custom hosting.
44


45
```css { .api }
46
@font-face {
47
  font-family: 'Material Icons';
48
  font-style: normal;
49
  font-weight: 400;
50
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
51
  src: local('Material Icons'),
52
       local('MaterialIcons-Regular'),
53
       url(MaterialIcons-Regular.woff2) format('woff2'),
54
       url(MaterialIcons-Regular.woff) format('woff'),
55
       url(MaterialIcons-Regular.ttf) format('truetype');
56
}
57


58
.material-icons {
59
  font-family: 'Material Icons';
60
  font-weight: normal;
61
  font-style: normal;
62
  font-size: 24px;
63
  display: inline-block;
64
  line-height: 1;
65
  text-transform: none;
66
  letter-spacing: normal;
67
  word-wrap: normal;
68
  white-space: nowrap;
69
  direction: ltr;
70
  -webkit-font-smoothing: antialiased;
71
  text-rendering: optimizeLegibility;
72
  -moz-osx-font-smoothing: grayscale;
73
  font-feature-settings: 'liga';
74
}
75
```
76


77
**Usage Examples:**
78


79
```css
80
/* Custom icon sizes */
81
.material-icons.md-18 { font-size: 18px; }
82
.material-icons.md-24 { font-size: 24px; }
83
.material-icons.md-36 { font-size: 36px; }
84
.material-icons.md-48 { font-size: 48px; }
85


86
/* Custom colors */
87
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
88
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
89


90
/* Usage in HTML */
91
```
92


93
```html
94
<i class="material-icons md-48">cloud</i>
95
<i class="material-icons md-dark">face</i>
96
<i class="material-icons md-light">account_circle</i>
97
```
98


99
### Font File Formats
100


101
The package includes multiple font formats for broad browser compatibility:
102


103
```javascript { .api }
104
interface FontFiles {
105
  eot: "MaterialIcons-Regular.eot";      // IE6-8 support
106
  svg: "MaterialIcons-Regular.svg";      // Legacy iOS support  
107
  ttf: "MaterialIcons-Regular.ttf";      // Desktop fonts
108
  woff: "MaterialIcons-Regular.woff";    // Web fonts
109
  woff2: "MaterialIcons-Regular.woff2";  // Modern web fonts (smallest)
110
}
111
```
112


113
### Icon Codepoints
114


115
Maps icon names to Unicode codepoints for programmatic access.
116


117
```javascript { .api }
118
/**
119
 * Icon name to Unicode codepoint mapping
120
 * Format: "icon_name codepoint"
121
 * Example: "3d_rotation e84d"
122
 */
123
interface CodepointMap {
124
  [iconName: string]: string; // Unicode codepoint in hex
125
}
126
```
127


128
**Usage Examples:**
129


130
```javascript
131
// Read codepoints file programmatically
132
const fs = require('fs');
133
const { STATIC_PATH } = require('material-design-icons');
134
const path = require('path');
135


136
const codepointsPath = path.join(STATIC_PATH, 'iconfont', 'codepoints');
137
const codepoints = fs.readFileSync(codepointsPath, 'utf8')
138
  .split('\n')
139
  .filter(line => line.trim())
140
  .reduce((map, line) => {
141
    const [name, code] = line.split(' ');
142
    map[name] = String.fromCharCode(parseInt(code, 16));
143
    return map;
144
  }, {});
145


146
console.log(codepoints['3d_rotation']); // Returns Unicode character
147
```
148


149
### CSS Integration Patterns
150


151
```css
152
/* Button with icon */
153
.btn-with-icon {
154
  display: inline-flex;
155
  align-items: center;
156
  gap: 8px;
157
}
158


159
.btn-with-icon .material-icons {
160
  font-size: 18px;
161
}
162


163
/* Icon-only button */
164
.icon-button {
165
  border: none;
166
  background: none;
167
  padding: 8px;
168
  border-radius: 4px;
169
  cursor: pointer;
170
}
171


172
.icon-button .material-icons {
173
  font-size: 24px;
174
  color: #666;
175
}
176


177
.icon-button:hover .material-icons {
178
  color: #000;
179
}
180
```
181


182
```html
183
<!-- Button with icon and text -->
184
<button class="btn-with-icon">
185
  <i class="material-icons">add</i>
186
  Add Item
187
</button>
188


189
<!-- Icon-only button -->
190
<button class="icon-button">
191
  <i class="material-icons">menu</i>
192
</button>
193
```
194


195
## Available Icons
196


197
All 932 icons are available through the web font. Common examples include:
198


199
- **Navigation**: arrow_back, arrow_forward, menu, close, expand_more
200
- **Actions**: add, delete, edit, search, settings, favorite
201
- **Content**: content_copy, content_cut, content_paste, clear, save
202
- **Communication**: call, email, message, chat, videocam
203
- **Media**: play_arrow, pause, stop, volume_up, volume_off
204


205
See the complete list in the codepoints file or refer to the [Material Design Icons website](https://fonts.google.com/icons).