<!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">5.5.55</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>&lt;span class=&quot;mdi mdi-<span id="name">name</span>&quot;&gt;&lt;/span&gt;</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>

Lines 1–500 of 717. Load more