.bool[data-bool='True']::before {
  content: '\F519';
  font-family: 'bootstrap-icons';
  color: var(--bs-green);
  padding-right: 0.3em;
}

.bool[data-bool='False']::before {
  content: '\F519';
  font-family: 'bootstrap-icons';
  color: var(--bs-red);
  padding-right: 0.3em;
}

.bool[data-bool='None']::before {
  content: '\F519';
  font-family: 'bootstrap-icons';
  color: var(--bs-gray);
  padding-right: 0.3em;
}

.boolend[data-bool='True']::after {
  content: '\F519';
  font-family: 'bootstrap-icons';
  color: var(--bs-green);
  padding-left: 0.3em;
}

.boolend[data-bool='False']::after {
  content: '\F519';
  font-family: 'bootstrap-icons';
  color: var(--bs-red);
  padding-left: 0.3em;
}

.boolend[data-bool='None']::after {
  content: '\F519';
  font-family: 'bootstrap-icons';
  color: var(--bs-gray);
  padding-left: 0.3em;
}