Material Design Icons (MDI) as SVG is a simple api that allows you to use any MDI icon with basic HTTP GET requests. Icons are available by using the MDI icon names as the requested URI. If you are not familiar with Material Design Icons, it is a very popular community driven icon font library for material design style icons, typically used by importing the library web fonts and css stylesheets or via an npm module.
This api allows you to use MDI icons in your project as an embed, svg, or json object. Created out of the need to quickly use icons in various existing projects with minimal overhead and the least amount of source changes possible. This api is a great resource for POCs, prototyping, and wireframing. If your project is going to utilize lots of svgs/icons, it may be better to include the MDI library and utilize the icons as the web font resource provided.
Supports all icons available with the current release of Material Design Icons
You will be redirected to materialdesignicons.com.
There are two primary endpoints, both endpoints use the icon name from Material Design Icons library to request icons. This API only supports GET requests. Endpoints have a versioning parameter to determine the MDI release to use for the icons source. Read more about endpoint versions.
// Basic request
https://api.mdisvg.com/v1/i/ICON-NAME
icon-name is the class name that MDI uses in its library. Read more about the icons available in the Material Design Icons documentation.
The format for a json request is a bit different. You can get multiple icons by passing in a JSON object string as the data parameter. The JSON object needs to be an array of icon objects with two properties:
// JSON icon object structure
[{ 'icon': 'icon-name', 'color': 'hex-code', 'size': 144 }, ...ect]
// Request multiple icons
https://api.mdisvg.com/v1/json?data=JSON-OBJECT-STRING
It is important to note, the JSON object needs to be as a string (stringified).
There are three ways to interact with this API service - request the icon as an image/object/embed, request the icon as an svg, or request the icon as a JSON object.
Use an icon as an image source direclty. The easiest way to utilize this service is to simply use the api endpoint as the source attribute for an image tag.
// Image source
<img src="https://api.mdisvg.com/v1/i/account" width="100" height="100" />
Change the fill color of the icon. You can use the color parameter with any hex value to return an icon with a different color. The color parameter supports a valid color hex code.
// Change the color by passing the color parameter
// Change the size by passing the size parameter
<img src="https://api.mdisvg.com/v1/i/account?color="3399cc&size=144"" width="auto" height="auto" />
If you want to use the icon as an inline svg, you can use the javascript loader function. This is an easy way to automatically load multiple icons dynamically.
// Element with custom data attribues
// data-mdisvg attribute, required
// data-mdicolor & data-mdisize attributes, optional
<span data-mdisvg="account" data-mdicolor="3399cc" data-mdisize="144"></span>
// Include the loader script within the body
<script src="https://api.mdisvg.com/loader"></script>
The loader function will find all elements that contain a data-mdisvg attribute, create a JSON object of icon elements, and make a request to the api. The contents of the data-mdicolor element will be replaced with the inline svg code returned. From there it can be manipulated directly via css or javascript, allowing you to change size, colors, or add animation/transitions.
Request multiple icons as a JSON object. This endpoint is also referenced automatically by the provided /loader endpoint.
// Make a GET request
https://api.mdisvg.com/v1/json?data=[{"icon":"account","color":"000000"},{"icon":"account-plus","color":"e50000"},{"icon":"account-cog","color":"3399cc"}]
// JSON response
[{
"name": "account"
"attributes": {
"color": "000000",
"unicode": "#xf0004;",
"path": "M256 363q35 0 60 -25t25 -60.5t-25 -60.5t-60 -25t-60 25t-25 60.5t25 60.5t60 25zM256 149q46 0 85.5 -11.5t62.5 -31t23 -42.5v-43h-342v43q0 23 23 42.5t62.5 31t85.5 11.5z"
}
"rendered": "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"100\" height=\"100\" viewBox=\"0 64.7273 512 448.462\"><g transform=\"scale(1,-1) translate(0, -480.36365)\"><path data-glyph=\"account\" fill=\"#000000\" d=\"M256 363q35 0 60 -25t25 -60.5t-25 -60.5t-60 -25t-60 25t-25 60.5t25 60.5t60 25zM256 149q46 0 85.5 -11.5t62.5 -31t23 -42.5v-43h-342v43q0 23 23 42.5t62.5 31t85.5 11.5z\"/></g></svg>"
}, ...]
Endpoint versioning will be used to update the available icon selections, based on releases from the Material Design Icons font. The list below will show the current API version with the correspoinding release version of the MDI icon set. If you are staring a new project, using the lates version is recommended.
// Version usage in endpoints
https://api.mdisvg.com/v1/i/account
v2: Material Design Icons v6.9.96 (Sep 2022)
v1: Material Design Icons v6.5.95 (Jan 2021)