Skip to content

Instantly share code, notes, and snippets.

@tivrfoa

tivrfoa/material-icons.html

Created June 23, 2019 03:11
Show Gist options
  • Save tivrfoa/e22f79bfe393ee07d3c11c25cc415734 to your computer and use it in GitHub Desktop.
Save tivrfoa/e22f79bfe393ee07d3c11c25cc415734 to your computer and use it in GitHub Desktop.
Download ZIP
Easy light way to show nice icons on your web page
Raw
material-icons.html
<!--
get the images base64 from the site below:
https://material.io/tools/icons/?style=baseline
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Material Icons</title>
<meta name="Description" content="material icons">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.baseline-accessible {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADjElEQVR4AeyaU7AkSxRFz9i2zauqvZ//nm3btm3btm2Nbdu2beVYJ7Ixt1GVEbX2d0fmyk5nSSaIiIiIiIjwPDzOrliKpeyKxz1P3AJ30OwbLOXt4g78g8aS351rfR3c4UTfp4kVLHVgLOAJmtjBE+EX6BZXoJuEHS6LK7DUcQEui7pQNIgT4HlxOtEyr3G0kAW4lfjDqc2c6kjLcId72+kn0I3LuAzd8ITXWNwiIiIitwG/5HQaGm7C9/5B4hRF+SDWqUXsv1YV3Kn+TzSWjGdDcQE+SGMPZvt1w9/3a3EDTcyMC31HwrM0cdMzp2S4BQbQxA/+lKJhFlhCkzCfSHihSSqPuS5g/CfdE9B5X4q6LWDQjpVcE9CZw5PdE9DpiqOcE9DBGD7mtXBPQGcIH/WPyS8XboFPkpMJrYAIzuMypwVE/Lro6LDATvxzOCk0AqyES5IW2Esx/ypOCViAJXA9u3AjTSEEdkpcyhEBCTQvhZs5RxdYmL7tH4R3sSDLAgU5O/twCgIK5OM+/MBx2JIFAdyCdTQpCARKEXxKQ+OqQFF8Q+OwAN+kcVig4BBssVULS5wQyCmJiba3R97Osk4I4D4aHfyXXzMt2+ll6IZ7cxtI5qhfhgsTP1zTpBJs4e855SUz8Dbq4n4VjXAFTWrB8OalMiMwXhU119ZWGEaTavCRpJ/8+tTFnCcW8GIaBDajuaQb/wbd/vZrKb8RNqeuwOcl3eBH1UovSQzwYeoCGJ5+gb6qiBPibLNTHwer0y8wVRXRUGKSUx6/YUtqCpJu9MNRotmaDXkPunGZIwKpowUy/vJS0NIxAeqj93GOCeAXNQu95pgAH1ACUyV5inOeemC6K+sC3hG6CFwiSeJfSKNHUNYFpChmK4FZLCtJkFNe/xJTA+hCtjd4/ClFkhD/xfLIGoSAXwPraVTeTFR9fkmjsiynfCACInjH9jVo49ISg1YV8J/9kTsggbwq1vPWdN7IEpYqncGZNNSZ0apCYAIi/tU01izGpziFrVtV8CoT/jl4mOPsRxUeKhKggAi/TWmf/4RI0AIl0KfQ1f9BigYgoMmpioGFEvhXigW0ldA0Lo2vaA4wX+aUDHQvpPFO4oyku840tXcNTkD9D8+qZw5bFvOe+mVEQiOgL1H4FsfTxMhk3q0rHxIBfenlX42vdi1bazGbI9nBv78gJ1TngYiIiIitG5ZgFAAAGjDE4iSa45IAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-size: contain;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="baseline-accessible"></div>
<span>accessible</span>
</body>
</html>
@tivrfoa
Copy link
Author

tivrfoa commented Jun 23, 2019 •
edited
Loading

You can actually download the icons:
https://google.github.io/material-design-icons/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment