Material components for the web, Using Material Icons

Views: 142   

Adding Material icons to your website is simple, All you need to do is include the Material Icons css file into your website. This you can do by adding the following tag into head section of your html page.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Once you added the css you can start using the material icons in your website by adding the following code.

<i class="material-icons"> thumb_up_alt </i>

Demo

Complete Code

<html>
  <head>
    <title>Material Components for the web, Icons Demo</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/material-components-web.min.css">
  </head>

  <body class="mdc-typography">
    <h3 class="mdc-typography--display2">Material Components for the web, Icons Examples</h3>
    <br>

    <p><i class="material-icons">cloud</i> - cloud</p>
    <p><i class="material-icons"> play_arrow </i> - play_arrow </p>
    <p><i class="material-icons"> thumb_up_alt </i> - thumb_up_alt </p>

    <br><br><br><br>    
    <hr>
    <p class="mdc-typography--body1">More examples available @  <a target="_blank" href="https://fastfoodcoding.com/courses/material-components-for-the-web-tutorial">https://fastfoodcoding.com/courses/material-components-for-the-web-tutorial</a></p>

    <script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
  </body>
</html>
On By