How to draw MDC checkbox tickmark from template using svg file instead of using svg element directly in markdown

Question

    <div class="mdc-form-field">
  <div class="mdc-checkbox">
    <input type="checkbox"
           id="my-checkbox"
           class="mdc-checkbox__native-control"/>
    <div class="mdc-checkbox__background">
      <svg class="mdc-checkbox__checkmark"
           viewBox="0 0 24 24">
        <path class="mdc-checkbox__checkmark__path"
              fill="none"
              stroke="white"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
      <div class="mdc-checkbox__mixedmark"></div>
    </div>
  </div>

  <label for="my-checkbox">My Checkbox Label</label>
</div>

I have tried something like

<div class="mdc-form-field">
    <div class="mdc-checkbox">
      <input type="checkbox" name="meetings" id="checkbox-meeting-{{meeting.id}}" class="mdc-checkbox__native-control"
             value="{{meeting.id}}"/>
      <div class="mdc-checkbox__background">
          <img src="{% static 'images/checkbox-tick.svg' %}" class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
          <div class="mdc-checkbox__mixedmark"></div>
      </div>
    </div>
    <label id="checkbox-meeting-{{meeting.id}}-label"
         for="checkbox-meeting-{{meeting.id}}" class="mdc-floating-label--float mdc-floating-label--float">
    {{ meeting.date|date:'m/d/Y' }}</label>
</div>

where my svg file looks like

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style>
        @import "@material/form-field/mdc-form-field";
        @import "@material/checkbox/mdc-checkbox";
    </style>
    <path class="mdc-checkbox__checkmark-path"
          fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>

As a result only background colour inside checkbox is filled only, white tick going from bottom to top right as expected, is not working/visible.

Suggestions most welcome.

What i think is class="mdc-checkbox__checkmark-path" is having some issue.

score 0 · Answer 1 · answered Aug 02 '18 at 15:15

For the SVG, the <path> colour needs to be specified using stroke. But the CSS will be using color.

Try setting the stroke to currentColor, which is a special colour keyword which represents the current value of color.

<path class="mdc-checkbox__checkmark-path"
      fill="none" stroke="currentColor" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>

How to draw MDC checkbox tickmark from template using svg file instead of using svg element directly in markdown

1 Answers1