Material Design Icons as svg

Material Design Icons on demand.
Get any icon as an SVG with no dependencies.

Overview

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.

Endpoints

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.

/v1/i/icon-name

// 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.


/v1/json?data=json-object-string

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:

  • icon: The icon name (ex. 'account', required)
  • color: Icon color by hex value (ex. '3399cc', optional)
  • size: Icon size in pixels via integer (ex. '100', optional)
// 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).

Examples

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.


Embedded SVG

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" />
Embedded SVG example:


Inline SVG

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.

  • First, create an HTML element and give it a data-mdisvg attribute set to icon name from the MDI icon library.
  • Optionally, you can set a data-mdicolor attribute with a hex color code.
  • Optionally, you can set a data-mdisize attribute with a positive integer.
  • Lastly, include a script tag in the body of the document, with the source attribute set to the /loader endpoint.
// 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.

Inline SVG example:



JSON

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>"
}, ...]

Versions

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)