htmlcsstoggleswitchmaterial-icons

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


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 class=".pwr-tog-container">
            <input type="checkbox", class="toggle">
            <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!


Solution

  • 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 class=".pwr-tog-container">
                <input type="checkbox", class="toggle">
                <i class ="material-icons pwr-tog-icon">power_settings_new</i>
            </div>
        </center>
    </body>