Getting Started with SVGs

Scalable Vector Graphics can be used with the <img /> or inlined in HTML. SVG is the preferred way of consuming the icons for the web.

For users of NPM, we provide all the icons as SVG files in the @mdi/svg package.

npm install @mdi/svg

The <img /> HTML element can display SVG files similar to how PNG, JPG, or GIF's are loaded.

<img src="path/to/account-circle.svg"/>

Inlining SVG allows one to include just the icons they need. This is done with the <svg> and <path> elements.

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="..." />
</svg>

svg {
    width: 24px;
    height: 24px;
}
svg path {
    fill: red;
}

svg {
    width: 24px;
    height: 24px;
    path {
        fill: red;
    }
}

Most themes are built around a 1rem font size equivalent to 16px.

Since the icons are natively pixel perfect at 24px we could use the width: 1.5rem for a 24x24 icon size.