CODEWITHSUNDEEP
html
rottenbanana
rottenbanana

Reputation: 207

MDL - How to add material icons?

I try to add MDL icons to the button in my project, but both span and i elements don't work. Snippet speaks for itself. 

<head>
  <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
</head>

<body>
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
    <span class="mdi mdi-cart"></span>
    <i class="mdi mdi-cart"></i>
    Click me 
   </button>
</body>

Also feel free to test it on jsFiddle: https://jsfiddle.net/dut6g8xn/2/

Upvotes: 0

Views: 831

Answers (2)

Kumar Gaurav
Kumar Gaurav

Reputation: 738

You can take reference from the below link for more icons.

enter link description here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
  </head>
  <body>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
      <i class="large material-icons">add_a_photo</i> Click me
    </button>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
      <i class="large material-icons">account_balance</i> Click me
    </button>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
      <i class="large material-icons">accessibility</i> Click me
    </button>
  </body>
</html>

Upvotes: 1

Crann Moroney
Crann Moroney

Reputation: 429

I don't think material icons work in buttons, I used to use them but I switched over to fontawesome you can search for icons at fontawesome.com. W3Schools also use them a lot they have a tutorial on them here w3schools.com/icons/fontawesome5_intro.asp. FontAwesome should work in buttons because I have used it before to do so.

<html>
  <head>
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' crossorigin='anonymous'>
  </head>
  <body>
    <button><i class='fas fa-user-circle'></i></button>
  </body>
</html>

Hope that helped.

Upvotes: 1

Related Questions