<button class="with-icon">I'm a button with an icon.</button>
<button class="with-icon with-icon--red">So am I, but with a red icon.</button>
<button class="with-icon with-icon--green">I have a green icon.</button>
<button class="with-icon with-icon--gradient">Wow, with gradient!!1!</button>
:root {
    --icon-color: rgb(0, 138, 214);
    --icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z'%3E%3C/path%3E%3C/svg%3E");
}

.with-icon--red {
    --icon-color: rgb(200, 12, 14);
}

.with-icon--green {
    --icon-color: rgb(56, 142, 60);
}

.with-icon--gradient {
    --icon-color: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(252,176,69,1) 100%); 
}

.with-icon:before {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1ch;
    /* fallback for browsers that don't support mask */
    content: var(--icon-heart);
}

@supports (mask-size: cover) or (-webkit-mask-size: cover){
    .with-icon:before {
        content: '';
        mask: var(--icon-heart) no-repeat center;
        -webkit-mask: var(--icon-heart) no-repeat center;
        mask-size: cover;
        -webkit-mask-size: cover;
        background: var(--icon-color);
    }
}

button {
    font-size: 1rem;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.