718 lines
403 KiB
HTML
718 lines
403 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<meta name="google" content="notranslate">
|
|||
|
|
<title>Material Design Icons</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
background: #fff;
|
|||
|
|
color: #222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1,
|
|||
|
|
h2,
|
|||
|
|
h3,
|
|||
|
|
p,
|
|||
|
|
div,
|
|||
|
|
blockquote,
|
|||
|
|
footer {
|
|||
|
|
font-family: "Helvetica Neue", Arial, sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
padding: 20px 20px 16px 20px;
|
|||
|
|
font-size: 26px;
|
|||
|
|
line-height: 26px;
|
|||
|
|
font-weight: normal;
|
|||
|
|
color: #FFF;
|
|||
|
|
background-color: #2196F3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 svg {
|
|||
|
|
vertical-align: middle;
|
|||
|
|
width: 26px;
|
|||
|
|
height: 26px;
|
|||
|
|
margin: 0 6px 4px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 svg path {
|
|||
|
|
fill: #FFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 .version {
|
|||
|
|
font-size: 14px;
|
|||
|
|
background: #FFF;
|
|||
|
|
padding: 4px 10px;
|
|||
|
|
float: right;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
margin: -3px 0 0 0;
|
|||
|
|
color: #666;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 .version::before {
|
|||
|
|
content: 'v';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 code {
|
|||
|
|
font-size: 20px;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
padding: 4px 12px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
float: right;
|
|||
|
|
margin: -3px 10px 0 0;
|
|||
|
|
border: 1px solid transparent;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 code:hover {
|
|||
|
|
border: 1px solid #FFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 code svg {
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
margin: -1px -4px 0 -2px
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 {
|
|||
|
|
font-size: 18px;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 small {
|
|||
|
|
color: #555;
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 small::before {
|
|||
|
|
content: '(';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 small::after {
|
|||
|
|
content: ')';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 span {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2.newicons span::before {
|
|||
|
|
position: absolute;
|
|||
|
|
content: ' ';
|
|||
|
|
width: 100%;
|
|||
|
|
height: 0.2rem;
|
|||
|
|
bottom: -0.25rem;
|
|||
|
|
background: #3C90BE;
|
|||
|
|
border-radius: 0.1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2.deprecatedicons span::before {
|
|||
|
|
position: absolute;
|
|||
|
|
content: ' ';
|
|||
|
|
width: 100%;
|
|||
|
|
height: 0.2rem;
|
|||
|
|
bottom: -0.25rem;
|
|||
|
|
background: #BE3C3C;
|
|||
|
|
border-radius: 0.1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
font-size: 14px;
|
|||
|
|
padding: 10px 20px 0 20px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p code {
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
background: #F1F1F1;
|
|||
|
|
padding: 3px 5px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
border: 1px solid #DDD;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p i.mdi {
|
|||
|
|
vertical-align: middle;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p i.mdi.dark-demo {
|
|||
|
|
background: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p.note {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 14px;
|
|||
|
|
padding: 0 20px 5px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p.deprecated {
|
|||
|
|
margin: -0.5rem 0 0.25rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p.extras {
|
|||
|
|
margin-top: -0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.icons {
|
|||
|
|
padding: 0 20px 10px 20px;
|
|||
|
|
-webkit-column-count: 5;
|
|||
|
|
-moz-column-count: 5;
|
|||
|
|
column-count: 5;
|
|||
|
|
-webkit-column-gap: 20px;
|
|||
|
|
-moz-column-gap: 20px;
|
|||
|
|
column-gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.icons div {
|
|||
|
|
line-height: 2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.icons div span {
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: inline-block;
|
|||
|
|
max-width: calc(100% - 90px);
|
|||
|
|
overflow: hidden;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.icons div code:hover,
|
|||
|
|
div.icons div span:hover,
|
|||
|
|
div.icons div i:hover {
|
|||
|
|
color: #3c90be;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.icons div code:hover {
|
|||
|
|
border-color: #3c90be;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.icons div code {
|
|||
|
|
border: 1px solid #DDD;
|
|||
|
|
width: 46px;
|
|||
|
|
margin-left: 2px;
|
|||
|
|
margin-right: 4px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 24px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.icons div i {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 24px;
|
|||
|
|
text-align: center;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
cursor: pointer;
|
|||
|
|
line-height: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.icons .mdi::before {
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.icons div.new::before {
|
|||
|
|
content: ' ';
|
|||
|
|
width: 0.2rem;
|
|||
|
|
height: 1.75rem;
|
|||
|
|
position: absolute;
|
|||
|
|
margin-top: 0.25rem;
|
|||
|
|
margin-left: -0.25rem;
|
|||
|
|
background: #3C90BE;
|
|||
|
|
border-radius: 0.1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.icons div.deprecated::before {
|
|||
|
|
content: ' ';
|
|||
|
|
width: 0.2rem;
|
|||
|
|
height: 1.75rem;
|
|||
|
|
position: absolute;
|
|||
|
|
margin-top: 0.25rem;
|
|||
|
|
margin-left: -0.25rem;
|
|||
|
|
background: #BE3C3C;
|
|||
|
|
border-radius: 0.1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
pre {
|
|||
|
|
margin: 0 20px;
|
|||
|
|
font-family: Consolas, monospace;
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid #DDD;
|
|||
|
|
background: #F1F1F1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
blockquote {
|
|||
|
|
position: relative;
|
|||
|
|
margin: 1rem 1rem 0 1rem;
|
|||
|
|
padding: 0.5rem 0.5rem 0.5rem 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
blockquote.note::before {
|
|||
|
|
content: ' ';
|
|||
|
|
width: 0.25rem;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #DDD;
|
|||
|
|
position: absolute;
|
|||
|
|
border-radius: 0.25rem;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
blockquote.deprecated::before {
|
|||
|
|
content: ' ';
|
|||
|
|
width: 0.25rem;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #BE3C3C;
|
|||
|
|
position: absolute;
|
|||
|
|
border-radius: 0.25rem;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.copied {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 100px;
|
|||
|
|
left: 50%;
|
|||
|
|
width: 200px;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #3c763d;
|
|||
|
|
background-color: #dff0d8;
|
|||
|
|
border: 1px solid #d6e9c6;
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-left: -100px;
|
|||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.examples {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin: 0.5rem 1.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.examples > div {
|
|||
|
|
display: flex;
|
|||
|
|
margin-right: 0.5rem;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.examples > div > div:first-child {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 0.5rem;
|
|||
|
|
border-radius: 0.25rem;
|
|||
|
|
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.4);
|
|||
|
|
background: #FFF;
|
|||
|
|
z-index: 1;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.examples > div > div:first-child + div {
|
|||
|
|
display: flex;
|
|||
|
|
margin-left: -0.25rem;
|
|||
|
|
padding: 0.5rem 0.75rem 0.5rem 1rem;
|
|||
|
|
background: #222;
|
|||
|
|
border-radius: 0 0.25rem 0.25rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.examples > div > div:first-child + div > code {
|
|||
|
|
color: #FFF;
|
|||
|
|
align-self: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.examples > div > div.dark:first-child {
|
|||
|
|
background: #444;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.examples i {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div.examples-size > div > div:first-child {
|
|||
|
|
min-width: 3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 20px;
|
|||
|
|
color: #666;
|
|||
|
|
border-top: 1px solid #DDD;
|
|||
|
|
background: #F1F1F1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer > div:first-child {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer > div:last-child {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer a {
|
|||
|
|
color: #e91e63;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer a:hover {
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<h1>
|
|||
|
|
<svg>
|
|||
|
|
<path d="M0,0H8V3H18V0H26V8H23V18H26V26H18V23H8V21H18V18H21V8H18V5H8V8H5V18H8V26H0V18H3V8H0V0M2,2V6H6V2H2M2,20V24H6V20H2M20,2V6H24V2H20M20,20V24H24V20H20Z"></path>
|
|||
|
|
</svg>
|
|||
|
|
Material Design Icons
|
|||
|
|
<span class="version">7.1.96</span>
|
|||
|
|
<code id="npm" title="Copy to Clipboard">
|
|||
|
|
<svg viewBox="0 0 24 24">
|
|||
|
|
<path d="M19,20H5V4H7V7H17V4H19M12,2A1,1 0 0,1 13,3A1,1 0 0,1 12,4A1,1 0 0,1 11,3A1,1 0 0,1 12,2M19,2H14.82C14.4,0.84 13.3,0 12,0C10.7,0 9.6,0.84 9.18,2H5A2,2 0 0,0 3,4V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V4A2,2 0 0,0 19,2Z" />
|
|||
|
|
</svg>
|
|||
|
|
npm install @mdi/font
|
|||
|
|
</code>
|
|||
|
|
</h1>
|
|||
|
|
|
|||
|
|
<h2 class="usage">Usage</h2>
|
|||
|
|
<pre><code><span class="mdi mdi-<span id="name">name</span>"></span></code></pre>
|
|||
|
|
|
|||
|
|
<blockquote class="note">
|
|||
|
|
Click the icon, hex codepoint, or name below to copy the value to your clipboard.
|
|||
|
|
</blockquote>
|
|||
|
|
|
|||
|
|
<h2 class="newicons"><span>New</span> Icons <small id="newIconsCount">-</small></h2>
|
|||
|
|
<div class="icons" id="newIcons"></div>
|
|||
|
|
|
|||
|
|
<h2 class="icons">All Icons <small id="iconsCount">-</small></h2>
|
|||
|
|
<div class="icons" id="icons"></div>
|
|||
|
|
|
|||
|
|
<h2 class="deprecatedicons"><span>Deprecated</span> Icons <small id="deprecatedIconsCount">-</small></h2>
|
|||
|
|
<p class="deprecated" id="deprecated">
|
|||
|
|
Deprecated icons will be removed in a future major release.
|
|||
|
|
</p>
|
|||
|
|
<div class="icons" id="deprecatedIcons"></div>
|
|||
|
|
|
|||
|
|
<h2 class="extras">Extras</h2>
|
|||
|
|
|
|||
|
|
<p class="extras">The helper CSS classes are listed below.</p>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h3>Size</h3>
|
|||
|
|
|
|||
|
|
<div class="examples examples-size">
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-18px mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-18px</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-24px mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-24px</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-36px</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-48px mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-48px</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<h3>Rotate</h3>
|
|||
|
|
|
|||
|
|
<div class="examples">
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-rotate-45 mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-rotate-45</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-rotate-90 mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-rotate-90</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-rotate-135 mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-rotate-135</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-rotate-180 mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-rotate-180</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-rotate-225 mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-rotate-225</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-rotate-270 mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-rotate-270</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-rotate-315 mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-rotate-315</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h3>Flip</h3>
|
|||
|
|
|
|||
|
|
<div class="examples">
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-account-alert"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-flip-h mdi-account-alert"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-flip-h</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-flip-v mdi-account-alert"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-flip-v</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p class="note"><strong>Note:</strong> We do not include the ability to use <code>mdi-flip-*</code> and
|
|||
|
|
<code>mdi-rotate-*</code> at the same time.</p>
|
|||
|
|
|
|||
|
|
<h3>Spin</h3>
|
|||
|
|
|
|||
|
|
<div class="examples">
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-spin mdi-loading"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-spin</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-spin mdi-star"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-spin</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h3>Color</h3>
|
|||
|
|
|
|||
|
|
<div class="examples">
|
|||
|
|
<div>
|
|||
|
|
<div class="dark">
|
|||
|
|
<i class="mdi mdi-36px mdi-light mdi-account dark-demo"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-light</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="dark">
|
|||
|
|
<i class="mdi mdi-36px mdi-light mdi-inactive mdi-account dark-demo"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-light mdi-inactive</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-dark mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-dark</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<i class="mdi mdi-36px mdi-dark mdi-inactive mdi-account"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<code>mdi-dark mdi-inactive</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
<div>
|
|||
|
|
Generated with <a href="https://npmjs.com/package/@mdi/font-build">@mdi/font-build</a>
|
|||
|
|
by <a href="http://MaterialDesignIcons.com/">MaterialDesignIcons.com</a>.
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<a href="https://www.npmjs.com/org/mdi" target="_blank">NPM @mdi Organization</a>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function isNew(icon) {
|
|||
|
|
return icon.version === '7.1.96';
|
|||
|
|
}
|
|||
|
|
function isDeprecated(icon) {
|
|||
|
|
return typeof icon.deprecated == 'undefined'
|
|||
|
|
? false
|
|||
|
|
: icon.deprecated;
|
|||
|
|
}
|
|||
|
|
function copyText(text) {
|
|||
|
|
var copyFrom = document.createElement('textarea');
|
|||
|
|
copyFrom.setAttribute("style", "position:fixed;opacity:0;top:100px;left:100px;");
|
|||
|
|
copyFrom.value = text;
|
|||
|
|
document.body.appendChild(copyFrom);
|
|||
|
|
copyFrom.select();
|
|||
|
|
document.execCommand('copy');
|
|||
|
|
var copied = document.createElement('div');
|
|||
|
|
copied.setAttribute('class', 'copied');
|
|||
|
|
copied.appendChild(document.createTextNode('Copied to Clipboard'));
|
|||
|
|
document.body.appendChild(copied);
|
|||
|
|
setTimeout(function () {
|
|||
|
|
document.body.removeChild(copyFrom);
|
|||
|
|
document.body.removeChild(copied);
|
|||
|
|
}, 1500);
|
|||
|
|
};
|
|||
|
|
function getIconItem(icon, isNewIcon, isDeprecatedIcon) {
|
|||
|
|
var div = document.createElement('div'),
|
|||
|
|
i = document.createElement('i');
|
|||
|
|
i.className = 'mdi mdi-' + icon.name;
|
|||
|
|
div.appendChild(i);
|
|||
|
|
var code = document.createElement('code');
|
|||
|
|
code.appendChild(document.createTextNode(icon.hex));
|
|||
|
|
div.appendChild(code);
|
|||
|
|
var span = document.createElement('span');
|
|||
|
|
span.appendChild(document.createTextNode('mdi-' + icon.name));
|
|||
|
|
div.appendChild(span);
|
|||
|
|
span.onclick = function () {
|
|||
|
|
document.getElementById('name').innerHTML = icon.name;
|
|||
|
|
};
|
|||
|
|
i.onmouseup = function () {
|
|||
|
|
copyText(String.fromCodePoint(parseInt(icon.hex, 16)));
|
|||
|
|
};
|
|||
|
|
code.onmouseup = function () {
|
|||
|
|
copyText(icon.hex);
|
|||
|
|
};
|
|||
|
|
span.onmouseup = function () {
|
|||
|
|
copyText('mdi-' + icon.name);
|
|||
|
|
};
|
|||
|
|
if (isNewIcon) {
|
|||
|
|
div.className = 'new';
|
|||
|
|
}
|
|||
|
|
if (isDeprecatedIcon) {
|
|||
|
|
div.className = 'deprecated';
|
|||
|
|
}
|
|||
|
|
return div;
|
|||
|
|
}
|
|||
|
|
(function () {
|
|||
|
|
var iconsCount = 0;
|
|||
|
|
var newIconsCount = 0;
|
|||
|
|
var deprecatedIconsCount = 0;
|
|||
|
|
var icons = [{name:"ab-testing",hex:"F01C9",version:"4.0.96"},{name:"abacus",hex:"F16E0",version:"5.9.55"},{name:"abjad-arabic",hex:"F1328",version:"4.9.95"},{name:"abjad-hebrew",hex:"F1329",version:"4.9.95"},{name:"abugida-devanagari",hex:"F132A",version:"4.9.95"},{name:"abugida-thai",hex:"F132B",version:"4.9.95"},{name:"access-point",hex:"F0003",version:"1.5.54"},{name:"access-point-check",hex:"F1538",version:"5.4.55"},{name:"access-point-minus",hex:"F1539",version:"5.4.55"},{name:"access-point-network",hex:"F0002",version:"1.5.54"},{name:"access-point-network-off",hex:"F0BE1",version:"3.2.89"},{name:"access-point-off",hex:"F1511",version:"5.4.55"},{name:"access-point-plus",hex:"F153A",version:"5.4.55"},{name:"access-point-remove",hex:"F153B",version:"5.4.55"},{name:"account",hex:"F0004",version:"1.5.54"},{name:"account-alert",hex:"F0005",version:"1.5.54"},{name:"account-alert-outline",hex:"F0B50",version:"3.0.39"},{name:"account-arrow-down",hex:"F1868",version:"6.2.95"},{name:"account-arrow-down-outline",hex:"F1869",version:"6.2.95"},{name:"account-arrow-left",hex:"F0B51",version:"3.0.39"},{name:"account-arrow-left-outline",hex:"F0B52",version:"3.0.39"},{name:"account-arrow-right",hex:"F0B53",version:"3.0.39"},{name:"account-arrow-right-outline",hex:"F0B54",version:"3.0.39"},{name:"account-arrow-up",hex:"F1867",version:"6.2.95"},{name:"account-arrow-up-outline",hex:"F186A",version:"6.2.95"},{name:"account-badge",hex:"F1B0A",version:"6.9.96"},{name:"account-badge-outline",hex:"F1B0B",version:"6.9.96"},{name:"account-box",hex:"F0006",version:"1.5.54"},{name:"account-box-multiple",hex:"F0934",version:"2.4.85"},{name:"account-box-multiple-outline",hex:"F100A",version:"4.1.95"},{name:"account-box-outline",hex:"F0007",version:"1.5.54"},{name:"account-cancel",hex:"F12DF",version:"4.8.95"},{name:"account-cancel-outline",hex:"F12E0",version:"4.8.95"},{name:"account-card",hex:"F1BA4",version:"7.0.96"},{name:"account-card-outline",hex:"F1BA5",version:"7.0.96"},{name:"account-cash",hex:"F1097",version:"4.2.95"},{name:"account-cash-outline",hex:"F1098",version:"4.2.95"},{name:"account-check",hex:"F0008",version:"1.5.54"},{name:"account-check-outline",hex:"F0BE2",version:"3.2.89"},{name:"account-child",hex:"F0A89",version:"2.7.94"},{name:"account-child-circle",hex:"F0A8A",version:"2.7.94"},{name:"account-child-outline",hex:"F10C8",version:"4.3.95"},{name:"account-circle",hex:"F0009",version:"1.5.54"},{name:"account-circle-outline",hex:"F0B55",version:"3.0.39"},{name:"account-clock",hex:"F0B56",version:"3.0.39"},{name:"account-clock-outline",hex:"F0B57",version:"3.0.39"},{name:"account-cog",hex:"F1370",version:"4.9.95"},{name:"account-cog-outline",hex:"F1371",version:"4.9.95"},{name:"account-convert",hex:"F000A",version:"1.5.54"},{name:"account-convert-outline",hex:"F1301",version:"4.8.95"},{name:"account-cowboy-hat",hex:"F0E9B",version:"3.7.94"},{name:"account-cowboy-hat-outline",hex:"F17F3",version:"6.1.95"},{name:"account-credit-card",hex:"F1BA6",version:"7.0.96"},{name:"account-credit-card-outline",hex:"F1BA7",version:"7.0.96"},{name:"account-details",hex:"F0631",version:"1.6.50"},{name:"account-details-outline",hex:"F1372",version:"4.9.95"},{name:"account-edit",hex:"F06BC",version:"1.8.36"},{name:"account-edit-outline",hex:"F0FFB",version:"4.0.96"},{name:"account-eye",hex:"F0420",version:"1.5.54"},{name:"account-eye-outline",hex:"F127B",version:"4.7.95"},{name:"account-filter",hex:"F0936",version:"2.4.85"},{name:"account-filter-outline",hex:"F0F9D",version:"4.0.96"},{name:"account-group",hex:"F0849",version:"2.1.99"},{name:"account-group-outline",hex:"F0B58",version:"3.0.39"},{name:"account-hard-hat",hex:"F05B5",version:"1.5.54"},{name:"account-hard-hat-outline",hex:"F1A1F",version:"6.6.96"},{name:"account-heart",hex:"F0899",version:"2.2.43"},{name:"account-heart-outline",hex:"F0BE3",version:"3.2.89"},{name:"account-injury",hex:"F1815",version:"6.1.95"},{name:"account-injury-outline",hex:"F1816",version:"6.1.95"},{name:"account-key",hex:"F000B",version:"1.5.54"},{name:"account-key-outline",hex:"F0BE4",version:"3.2.
|
|||
|
|
icons.push({ "name": "blank", "hex": "f68c" });
|
|||
|
|
icons.forEach(function (icon) {
|
|||
|
|
var item = getIconItem(icon, isNew(icon), isDeprecated(icon));
|
|||
|
|
document.getElementById('icons').appendChild(item);
|
|||
|
|
if (isNew(icon)) {
|
|||
|
|
var newItem = getIconItem(icon, false, false);
|
|||
|
|
document.getElementById('newIcons').appendChild(newItem);
|
|||
|
|
newIconsCount++;
|
|||
|
|
}
|
|||
|
|
if (isDeprecated(icon)) {
|
|||
|
|
var deprecatedItem = getIconItem(icon, false, false);
|
|||
|
|
document.getElementById('deprecatedIcons').appendChild(deprecatedItem);
|
|||
|
|
deprecatedIconsCount++;
|
|||
|
|
}
|
|||
|
|
iconsCount++;
|
|||
|
|
});
|
|||
|
|
var whereDeprecated = function (icon) {
|
|||
|
|
return icon.deprecated === true;
|
|||
|
|
};
|
|||
|
|
if (!(icons.find(whereDeprecated))) {
|
|||
|
|
document.getElementById('deprecated').style.display = 'none';
|
|||
|
|
}
|
|||
|
|
document.getElementById('iconsCount').innerText = iconsCount;
|
|||
|
|
document.getElementById('newIconsCount').innerText = newIconsCount;
|
|||
|
|
document.getElementById('deprecatedIconsCount').innerText = deprecatedIconsCount;
|
|||
|
|
document.getElementById('npm').addEventListener('click', function () {
|
|||
|
|
copyText('npm install @mdi/font');
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|