358 lines
149 KiB
HTML
358 lines
149 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, 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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icons div {
|
|||
|
|
line-height: 2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icons div code:hover,
|
|||
|
|
.icons div span:hover,
|
|||
|
|
.icons div i:hover {
|
|||
|
|
color: #3c90be;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icons div code:hover {
|
|||
|
|
border-color: #3c90be;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icons div i {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 24px;
|
|||
|
|
text-align: center;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
cursor: pointer;
|
|||
|
|
line-height: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icons .mdi:before {
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
pre {
|
|||
|
|
margin: 0 20px;
|
|||
|
|
font-family: Consolas, monospace;
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid #DDD;
|
|||
|
|
background: #F1F1F1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer {
|
|||
|
|
padding: 20px;
|
|||
|
|
color: #666;
|
|||
|
|
border-top: 1px solid #DDD;
|
|||
|
|
background: #F1F1F1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer a {
|
|||
|
|
color: #e91e63;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
</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">3.6.95</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>Usage</h2>
|
|||
|
|
<pre><code><span class="mdi mdi-<span id="name">name</span>"></span></code></pre>
|
|||
|
|
|
|||
|
|
<h2>Icons <small>(click to copy to clipboard)</small></h2>
|
|||
|
|
<div class="icons" id="icons"></div>
|
|||
|
|
|
|||
|
|
<h2>Extras</h2>
|
|||
|
|
|
|||
|
|
<p>The helper CSS classes are listed below.</p>
|
|||
|
|
|
|||
|
|
<h3>Size</h3>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
<code>mdi-18px</code> <i class="mdi mdi-18px mdi-account"></i>
|
|||
|
|
<code>mdi-24px</code> <i class="mdi mdi-24px mdi-account"></i>
|
|||
|
|
<code>mdi-36px</code> <i class="mdi mdi-36px mdi-account"></i>
|
|||
|
|
<code>mdi-48px</code> <i class="mdi mdi-48px mdi-account"></i>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h3>Rotate</h3>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
<i class="mdi mdi-48px mdi-account"></i>
|
|||
|
|
<code>mdi-rotate-45</code> <i class="mdi mdi-48px mdi-rotate-45 mdi-account"></i>
|
|||
|
|
<code>mdi-rotate-90</code> <i class="mdi mdi-48px mdi-rotate-90 mdi-account"></i>
|
|||
|
|
<code>mdi-rotate-135</code> <i class="mdi mdi-48px mdi-rotate-135 mdi-account"></i>
|
|||
|
|
<code>mdi-rotate-180</code> <i class="mdi mdi-48px mdi-rotate-180 mdi-account"></i>
|
|||
|
|
<code>mdi-rotate-225</code> <i class="mdi mdi-48px mdi-rotate-225 mdi-account"></i>
|
|||
|
|
<code>mdi-rotate-270</code> <i class="mdi mdi-48px mdi-rotate-270 mdi-account"></i>
|
|||
|
|
<code>mdi-rotate-315</code> <i class="mdi mdi-48px mdi-rotate-315 mdi-account"></i>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h3>Flip</h3>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
<i class="mdi mdi-48px mdi-account-alert"></i>
|
|||
|
|
<code>mdi-flip-h</code> <i class="mdi mdi-48px mdi-flip-h mdi-account-alert"></i>
|
|||
|
|
<code>mdi-flip-v</code> <i class="mdi mdi-48px mdi-flip-v mdi-account-alert"></i>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
<code>mdi-spin</code> <i class="mdi mdi-48px mdi-spin mdi-loading"></i>
|
|||
|
|
<code>mdi-spin</code> <i class="mdi mdi-48px mdi-spin mdi-star"></i>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h3>Color</h3>
|
|||
|
|
|
|||
|
|
<p style="padding-bottom:20px;">
|
|||
|
|
<code>mdi-light</code> <i class="mdi mdi-48px mdi-light mdi-account dark-demo"></i>
|
|||
|
|
<code>mdi-light mdi-inactive</code> <i class="mdi mdi-48px mdi-light mdi-inactive mdi-account dark-demo"></i>
|
|||
|
|
<code>mdi-dark</code> <i class="mdi mdi-48px mdi-dark mdi-account"></i>
|
|||
|
|
<code>mdi-dark mdi-inactive</code> <i class="mdi mdi-48px mdi-dark mdi-inactive mdi-account"></i>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
Generated with <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a> at <a href="http://materialdesignicons.com/">MaterialDesignIcons.com</a>.
|
|||
|
|
<a href="https://www.npmjs.com/org/mdi" target="_blank">NPM @mdi Organization</a>.
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
(function () {
|
|||
|
|
var icons = [{"name":"access-point","hex":"f002"},{"name":"access-point-network","hex":"f003"},{"name":"access-point-network-off","hex":"fbbd"},{"name":"account","hex":"f004"},{"name":"account-alert","hex":"f005"},{"name":"account-alert-outline","hex":"fb2c"},{"name":"account-arrow-left","hex":"fb2d"},{"name":"account-arrow-left-outline","hex":"fb2e"},{"name":"account-arrow-right","hex":"fb2f"},{"name":"account-arrow-right-outline","hex":"fb30"},{"name":"account-badge","hex":"fd83"},{"name":"account-badge-alert","hex":"fd84"},{"name":"account-badge-alert-outline","hex":"fd85"},{"name":"account-badge-horizontal","hex":"fdf0"},{"name":"account-badge-horizontal-outline","hex":"fdf1"},{"name":"account-badge-outline","hex":"fd86"},{"name":"account-box","hex":"f006"},{"name":"account-box-multiple","hex":"f933"},{"name":"account-box-outline","hex":"f007"},{"name":"account-card-details","hex":"f5d2"},{"name":"account-card-details-outline","hex":"fd87"},{"name":"account-check","hex":"f008"},{"name":"account-check-outline","hex":"fbbe"},{"name":"account-child","hex":"fa88"},{"name":"account-child-circle","hex":"fa89"},{"name":"account-circle","hex":"f009"},{"name":"account-circle-outline","hex":"fb31"},{"name":"account-clock","hex":"fb32"},{"name":"account-clock-outline","hex":"fb33"},{"name":"account-convert","hex":"f00a"},{"name":"account-details","hex":"f631"},{"name":"account-edit","hex":"f6bb"},{"name":"account-group","hex":"f848"},{"name":"account-group-outline","hex":"fb34"},{"name":"account-heart","hex":"f898"},{"name":"account-heart-outline","hex":"fbbf"},{"name":"account-key","hex":"f00b"},{"name":"account-key-outline","hex":"fbc0"},{"name":"account-minus","hex":"f00d"},{"name":"account-minus-outline","hex":"faeb"},{"name":"account-multiple","hex":"f00e"},{"name":"account-multiple-check","hex":"f8c4"},{"name":"account-multiple-minus","hex":"f5d3"},{"name":"account-multiple-minus-outline","hex":"fbc1"},{"name":"account-multiple-outline","hex":"f00f"},{"name":"account-multiple-plus","hex":"f010"},{"name":"account-multiple-plus-outline","hex":"f7ff"},{"name":"account-network","hex":"f011"},{"name":"account-network-outline","hex":"fbc2"},{"name":"account-off","hex":"f012"},{"name":"account-off-outline","hex":"fbc3"},{"name":"account-outline","hex":"f013"},{"name":"account-plus","hex":"f014"},{"name":"account-plus-outline","hex":"f800"},{"name":"account-question","hex":"fb35"},{"name":"account-question-outline","hex":"fb36"},{"name":"account-remove","hex":"f015"},{"name":"account-remove-outline","hex":"faec"},{"name":"account-search","hex":"f016"},{"name":"account-search-outline","hex":"f934"},{"name":"account-settings","hex":"f630"},{"name":"account-star","hex":"f017"},{"name":"account-star-outline","hex":"fbc4"},{"name":"account-supervisor","hex":"fa8a"},{"name":"account-supervisor-circle","hex":"fa8b"},{"name":"account-switch","hex":"f019"},{"name":"account-tie","hex":"fcbf"},{"name":"accusoft","hex":"f849"},{"name":"adchoices","hex":"fd1e"},{"name":"adjust","hex":"f01a"},{"name":"adobe","hex":"f935"},{"name":"air-conditioner","hex":"f01b"},{"name":"air-filter","hex":"fd1f"},{"name":"air-horn","hex":"fd88"},{"name":"air-purifier","hex":"fd20"},{"name":"airbag","hex":"fbc5"},{"name":"airballoon","hex":"f01c"},{"name":"airplane","hex":"f01d"},{"name":"airplane-landing","hex":"f5d4"},{"name":"airplane-off","hex":"f01e"},{"name":"airplane-takeoff","hex":"f5d5"},{"name":"airplay","hex":"f01f"},{"name":"airport","hex":"f84a"},{"name":"alarm","hex":"f020"},{"name":"alarm-bell","hex":"f78d"},{"name":"alarm-check","hex":"f021"},{"name":"alarm-light","hex":"f78e"},{"name":"alarm-light-outline","hex":"fbc6"},{"name":"alarm-multiple","hex":"f022"},{"name":"alarm-off","hex":"f023"},{"name":"alarm-plus","hex":"f024"},{"name":"alarm-snooze","hex":"f68d"},{"name":"album","hex":"f025"},{"name":"alert","hex":"f026"},{"name":"alert-box","hex":"f027"},{"name":"alert-box-outline","hex":"fcc0"},{"name":"alert-circle","hex":"f028"},{"name":"alert-circle-outline","hex":"f5d6"},{"name":"alert-decagram","hex":"f6bc"},{"name":"alert-dec
|
|||
|
|
icons.push({ "name": "blank", "hex": "f68c" });
|
|||
|
|
var copyText = function (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);
|
|||
|
|
};
|
|||
|
|
for (var j = 0; j < icons.length; j++) {
|
|||
|
|
var div = document.createElement('div'),
|
|||
|
|
i = document.createElement('i');
|
|||
|
|
i.className = 'mdi mdi-' + icons[j].name;
|
|||
|
|
div.appendChild(i);
|
|||
|
|
var code = document.createElement('code');
|
|||
|
|
code.appendChild(document.createTextNode(icons[j].hex));
|
|||
|
|
div.appendChild(code);
|
|||
|
|
var span = document.createElement('span');
|
|||
|
|
span.appendChild(document.createTextNode('mdi-' + icons[j].name));
|
|||
|
|
div.appendChild(span);
|
|||
|
|
span.onclick = (function (icon) {
|
|||
|
|
return function () {
|
|||
|
|
document.getElementById('name').innerHTML = icon.name;
|
|||
|
|
};
|
|||
|
|
})(icons[j]);
|
|||
|
|
i.onmouseup = (function (icon) {
|
|||
|
|
return function () {
|
|||
|
|
copyText(String.fromCharCode(parseInt(icon.hex, 16)));
|
|||
|
|
};
|
|||
|
|
})(icons[j]);
|
|||
|
|
code.onmouseup = (function (icon) {
|
|||
|
|
return function () {
|
|||
|
|
copyText(icon.hex);
|
|||
|
|
};
|
|||
|
|
})(icons[j]);
|
|||
|
|
span.onmouseup = (function (icon) {
|
|||
|
|
return function () {
|
|||
|
|
copyText('mdi-' + icon.name);
|
|||
|
|
};
|
|||
|
|
})(icons[j]);
|
|||
|
|
document.getElementById('icons').appendChild(div);
|
|||
|
|
}
|
|||
|
|
document.getElementById('npm').addEventListener('click', function () {
|
|||
|
|
copyText('npm install @mdi/font');
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|