How do you change Material Icon permanently using CSS and HTML?

Question

I am trying to change the icon permanently from "add" to "done" after I click the icon. If I click the icon again, it should change from "done" to "add." I am wondering if it is possible to do this with CSS without using Javascript.

.material-icons::before {
  content: "add";
}

section:active .material-icons::before {
  /*background-color: red;*/
  content: "done";
}

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

<section>
  <span id="btn1" class="material-icons"></span>
</section>

you may consider some hack/workaround .. but what you describe is a JS job — Temani Afif, Apr 03 '18 at 08:57
There is 1 way with pure css, using a checkbox, but that's a bit hacky. https://stackoverflow.com/a/32721572/9288348 — Jeremy, Apr 03 '18 at 08:59
@marchelee Why not use javascript? you can find an easy demo at w3 schools, is cleaner and takes less time then that checkbox hack. — Jeremy, Apr 03 '18 at 09:03
@Jeremy I am not really good at Javascruipt hehehe but I will check w3 school for the tutorial.. thanks for your advice!! — marchelee, Apr 03 '18 at 09:06
@marchelee This would probably help: https://www.w3schools.com/jsref/event_onclick.asp and for example this is one of the demos that changes something onclick: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_addeventlistener — Jeremy, Apr 03 '18 at 09:09

Balázs Varga · Answer 1 · 2018-04-03T09:32:59.793

2

Here's the simplest CSS checkbox hack solution, you can start from here:

/* The hack */
input[type=checkbox] {
   display:none;
}
label {
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  cursor: pointer;
}

/* Default State */
input[type=checkbox] + section .material-icons::before {
   content:"add";
}

/* Toggled State */
input[type=checkbox]:checked + section .material-icons::before {
   content:"done";
}

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

<label>Click Me
<input type="checkbox">
<section>
  <span id="btn1" class="material-icons"></span>
</section>
</label>

edited Apr 03 '18 at 09:32

answered Apr 03 '18 at 09:08

Balázs Varga

1,797
2
16
32

Thank you very much!! @Balázs Varga – marchelee Apr 03 '18 at 09:11
@JamesDouglas what? It'll change the icon, but also scroll to the top of the page (default `button` behaviour). Tested in latest Chrome, FF, and even in IE11 (which don't show the element as a button, but everything else is working). – Balázs Varga Apr 03 '18 at 09:15
`but also scroll to the top of the page (default button behaviour)` --> and you think this side effect has no importance ? for me it make the whole thing bad – Temani Afif Apr 03 '18 at 09:16
@BalázsVarga The OP seems to be implying that the button should stay on `done` *permanantly* after it has been clicked once. – James Douglas Apr 03 '18 at 09:16
@BalázsVarga What you have currently works *exactly the same* as [what the OP has](https://jsfiddle.net/pqpd7ndL/). – James Douglas Apr 03 '18 at 09:21
@TemaniAfif I added a button element for semantic reasons but it works with any element, a div or span and this side effect will gone. – Balázs Varga Apr 03 '18 at 09:24
@JamesDouglas `I am trying to change the icon permanently from "add" to "done" after I click the icon. If I click the icon again, it should change from "done" to "add".` So what does it mean exactly? – Balázs Varga Apr 03 '18 at 09:26
For me using internet Chrome it works correctly (unless he means that it also should remain this way after refreshing the page). – Jeremy Apr 03 '18 at 09:28
If this is the case it's impossible with CSS only, so I think the answer is correct. – Balázs Varga Apr 03 '18 at 09:30

James Douglas · Answer 2 · 2018-04-03T10:42:37.720

The way this works, is there are two <span>'s, (one with the add and one with the done icon) and a checkbox all stacked on top of each other, an the done icon is hidden. The add icon is pointer-events: none;, and when you click on it the checkbox gets checked. Then the add icon gets hidden, and the done icon gets shown.

(Only works if you click directly on the text)

.done,
.add, .done {
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
}
.done { display: none; }
.add { display: inline-block; pointer-events: none; }
label {
  
  display: inline-block;
  cursor: pointer;
  position: relative;
}
input[type=checkbox] { position: absolute; top: 0; left: 0; }
input[type=checkbox]:checked~.done { display: inline-block; }

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

<input type="checkbox">
<div class="add">
  <span id="btn1" class="material-icons first">add</span>
</div>
<div class="done">
  <span id="btn1" class="material-icons">done</span>
</div>

I have run your code but the result is still the same like mine.. Ah and yes, I am using chrome — marchelee, Apr 03 '18 at 09:22
@JamesDouglas This only changes when you have your mouse pressed, when you let go the click button it just changes back to the previous icon again for me (using chrome) — Jeremy, Apr 03 '18 at 09:22

How do you change Material Icon permanently using CSS and HTML?

2 Answers2

Linked