Trying to add a material Icon to a custom toggle switch knob (HTML/CSS)-CodePudding

I'm new to CSS and followed a video tutorial to create a customized toggle control in CSS. Now, I would like to add a material icon to the knob but I'm struggling to understand the best approach to do it.

I tried adding HTML to the content property of the knob itself but later learned that you're not supposed to do that. So I found another example that shows a knob with an emoji used as the knob, but it's not quite the same as what I'm trying to accomplish. Here's the code I have so far:

:root{
    --scale: 1;
    --height: 50px;
    --width: 100px;
    --knob-diameter: 45px;
    --background-inactive: rgb(173, 173, 173);
    --background-active: rgb(65, 207, 65);
    --knob-color-inactive: rgb(78, 78, 78);
    --knob-color-active: rgb(78, 78, 78);
    --text-color-inactive: black;
    --text-color-active: white;
    --text-size: 1rem;
    --transition-speed: 0.15s;
}

body{
    background: #e5e5e5;
    height: 100vh
}

h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3rem;
    text-align: center;
    margin: 50px 0;
}

.pwr-tog-container{
    position:relative;
    width: var(--width);
    height: var(--height);
    background: red;
}

.pwr-tog-icon{
    position: relative;
    top: 0;
    left: 0;
}

/* Toggle switch body */
.toggle{
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: var(--width);
    height: var(--height);
    background: var(--background-inactive);
    /* box-shadow: inset 3px 3px rgb(0,0,0); */
    border-radius: calc(var(--height) / 2);
    position: relative;
    transform: scale(var(--scale));
    transition-property: background;
    transition-duration: var(--transition-speed);
}

/* Toggle switch knob */
.toggle:before{
    content: "";
    background: var(--knob-color-inactive);
    height: var(--knob-diameter);
    width: var(--knob-diameter);
    position: absolute;
    border-radius: 50%;
    top: calc((var(--height) - var(--knob-diameter)) / 2);
    left: calc((var(--height) - var(--knob-diameter)) / 2);
    transition: all var(--transition-speed);
    z-index: 2;
}

/* Toggle switch inactive text */
.toggle:after{
    content: "OFF";
    position: absolute;
    font-size: var(--text-size);
    color: var(--text-color-inactive);
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(25%, -50%);
    z-index: 1;
}

/* Toggle cwitch checked state */
.toggle:checked{
    background: var(--background-active);
}

/* Toggle Switch Knob offset */
.toggle:checked::before{
    left: calc((var(--height) - var(--knob-diameter)) / 2   var(--width) - var(--height));
}

.toggle:checked::after{
    content: "ON";
    left: 5%;
    color: var(--text-color-active);
}

<head>
    <link href = "https://fonts.googleapis.com/icon?family=Material Icons" rel = "stylesheet">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1>Toggle Switch</h1>
    <center>
        <div >
            <input type="checkbox", >
            <i class ="material-icons pwr-tog-icon">power_settings_new</i>
        </div>
    </center>
</body>

The website I referenced for the emoji toggle is this one here: https://codepen.io/chriscoyier/pen/EVamGp

Any help greatly appreciated!

CodePudding user response：

I would suggest using the pseudo element you're already utilizing for your knob and applying the font-family unicode for the symbol. See changes below to your .toggle:before pseudo classes. Cheers.

PS - Extra credit points if you make it without calc() functions ;)

:root{
    --scale: 1;
    --height: 50px;
    --width: 100px;
    --knob-diameter: 45px;
    --background-inactive: rgb(173, 173, 173);
    --background-active: rgb(65, 207, 65);
    --knob-color-inactive: rgb(78, 78, 78);
    --knob-color-active: rgb(78, 78, 78);
    --text-color-inactive: black;
    --text-color-active: white;
    --text-size: 1rem;
    --transition-speed: 0.15s;
}

body{
    background: #e5e5e5;
    height: 100vh
}

h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3rem;
    text-align: center;
    margin: 50px 0;
}

.pwr-tog-container{
    position:relative;
    width: var(--width);
    height: var(--height);
    background: red;
}

.pwr-tog-icon{
    position: relative;
    top: 0;
    left: 0;
}

/* Toggle switch body */
.toggle{
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: var(--width);
    height: var(--height);
    background: var(--background-inactive);
    /* box-shadow: inset 3px 3px rgb(0,0,0); */
    border-radius: calc(var(--height) / 2);
    position: relative;
    transform: scale(var(--scale));
    transition-property: background;
    transition-duration: var(--transition-speed);
}

/* Toggle switch knob */
.toggle:before{
    /* BEGIN NEW STUFF */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Material Icons";
    content: "\e8ac";
    font-size: 2rem;
    color: #f00;
    transition: color .35s ease;
    /* END NEW STUFF */
    background: var(--knob-color-inactive);
    height: var(--knob-diameter);
    width: var(--knob-diameter);
    position: absolute;
    border-radius: 50%;
    top: calc((var(--height) - var(--knob-diameter)) / 2);
    left: calc((var(--height) - var(--knob-diameter)) / 2);
    transition: all var(--transition-speed);
    z-index: 2;
}

/* Toggle switch inactive text */
.toggle:after{
    content: "OFF";
    position: absolute;
    font-size: var(--text-size);
    color: var(--text-color-inactive);
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(25%, -50%);
    z-index: 1;
}

/* Toggle cwitch checked state */
.toggle:checked{
    background: var(--background-active);
}

/* Toggle Switch Knob offset */
.toggle:checked::before{
    color: #0f0;
    left: calc((var(--height) - var(--knob-diameter)) / 2   var(--width) - var(--height));
}

.toggle:checked::after{
    content: "ON";
    left: 5%;
    color: var(--text-color-active);
}

<head>
    <link href = "https://fonts.googleapis.com/icon?family=Material Icons" rel = "stylesheet">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1>Toggle Switch</h1>
    <center>
        <div >
            <input type="checkbox", >
            <i class ="material-icons pwr-tog-icon">power_settings_new</i>
        </div>
    </center>
</body>