GitHub-like Tasklist icons

[Andre601]

I managed to customize the task list in such a way that it looks similar to GitHub's (unchecked) task lists.
Just create a new css file and add the below content to it (Don't forget to also add it as extra_css to your mkdocs.yml!)

CSS:

:root {
    --md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"/></svg>');
    --md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg>');
}

.md-typeset [type="checkbox"]:checked + .task-list-indicator:before {
    background-color: #c3c3c3;
}

.tabbed-set label.task-list-control {
    margin: 0 0em;
}

In my case did I had to add some custom margin for label.task-list-control because the results always had huge gabs (Maybe a result of having custom_css enabled?)
So if this causes your task lists to look weird, remove them or change the margin.

Picture: