JSFiddle - React, Tailwind, and code Playground

HTML

<button href="#" class="search  no-style search-active" style="display: inline-block;">
  <div class="pointer" style="display:none">::after</div>
</button>

CSS

.primary .search:after,
.primary .search[data-search="disabled"]:after {
  color: #fff;
  content: "\E8B6";
  font-family: "Material Icons";
  position: absolute;
  top: -25px;
  transition: color .3s;
  font-size: 26px;
  margin-left: -10px;
}

//THIS NEEDS TO BE APPLIED TO THE :after PSEUDO CLASS TO SET THE BACKGROUND COLOR OF THE BUTTON
.search-active {
  background-color: purple;
  padding: 12px 33px 19px 35px;
  margin: 0px -30px;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url('data:font/woff2;base64,d09GMgABAAAAAKVAAA8AAAAB4owAAKTkAAECTQAAAAAAAAAAAAAAAAAAAAAAAAAAGiQbNhyByGgG YACLHggEEQgKhcwIhJllATYCJAOOTguOSgAEIAWCfgcgWxaBUaO6NYMLum0A8OrOd8W2k+nmTrkd IvMuPmI2IoaNAwY4FGP2/5+TdIzhxt8AlepmPciDUtnQR439GCcNV3pgF0Vz7J06/EcTgcMqv4wd 674GLzwz86bxtZIpff43o6qqkvrm1rxXBAWcekPObIIQOoU4/g2RKMhFp7cFL7SeSAjPgH8yN3vy y0KTKUuQtI0sGeXWrpApmZKp1/lQiFzkkiAILhrCSw9d5OTsGAtBYT+28BjvtBeBjcsYycrJy9PH frye3fs+gkxadoAusoBCEqEikCgMja9RddEl2+j8v+m/jMvIggsk+SF5PCDJz+taQlfo6qVEhaqr MK7H934467crDoFJoAHCMtA25+JfRPWZ+P3fWnrN0IfB3buEn28VuaoKVQUMCkEFqwBQEaMiMBlq dfuMxAAKVmxMsFOutPZ9CE+7dOngTmoGqYPsF5jWe3NQN5nrz3XvxTUVC5YK5mkLnrmcdr67XMsv k3J1ptIi5Tm9pz0AymyB8GzNtowKyFXWutapGl0niP43l6Vs5qbIQ4Dt7n2BzbwS36ZJSYr0aPvJ ihC/wv9/HLTz7oeFkqiZRNPUEgl9Y9/j+dxsOATCmR/yA4QjISCQ98IlBBWQfCBcCcr13+fwAEFQ EhUPBLTW/1etgL1sN6FAD4+e/Nja3Xp0xTb0OKHXbpJ2j2i7XduCa9zD1p7m/3+X+r9P+ndO8icw JHHBoJFMAXJm5HKA7PEBx/PIUd35+ZV+pdU/gaFlw4Ch5cBAiGsngvteHvvC29ToeuKvPeee35o4 QTKcDbb7/lfuL1+ECXjvoLp9wSckXruo1o1LxaVwKdwKsUG0EB3EevPwzRPrw5s884Jt4kS56via 6s/sfpx5r2Wnn1hQJMtFkOUBS3ux9JLs5aq97l6tOCVwSkS2VcIfC/TclsDVB/rIV2Mu3IA9FPTw V5v9+P7idqnfl+gEHkYSeJhlNf+marUYcqlHOmKzvHtB21G7ueguB1VXVX/+DAbz/8cHOX/4QWAg 0AiiDAKijBkQNgCKsgACMAVx74EgKccs+91pUx4Apg4kFQjScsjakKvLlaO0Ub6cupCKcsu9srv+ 6ubK69pr+vPf99O01Yu8iNnpXZ23pXLRbr01VZt17r88D1+Xly8aht7+PH1gRIrwMDRhyANXAfhI...

JavaScript

$(".search").on("click", function() {
  $(this).toggleClass('search-active');
});