Update Todo icons in collapsed sidebar for Issues and MRs

app/helpers/issuables_helper.rb

@@ -386,8 +386,8 @@ module IssuablesHelper
     {
       todo_text: "Add todo",
       mark_text: "Mark todo as done",
-      todo_icon: (is_collapsed ? icon('plus-square') : nil),
-      mark_icon: (is_collapsed ? icon('check-square', class: 'todo-undone') : nil),
+      todo_icon: (is_collapsed ? sprite_icon('todo-add') : nil),
+      mark_icon: (is_collapsed ? sprite_icon('todo-done', css_class: 'todo-undone') : nil),
       issuable_id: issuable.id,
       issuable_type: issuable.class.name.underscore,
       url: project_todos_path(@project),

app/views/shared/issuable/_sidebar_todo.html.haml

@@ -1,6 +1,6 @@
 - is_collapsed = local_assigns.fetch(:is_collapsed, false)
-- mark_content = is_collapsed ? icon('check-square', class: 'todo-undone') : _('Mark todo as done')
-- todo_content = is_collapsed ? icon('plus-square') : _('Add todo')
+- mark_content = is_collapsed ? sprite_icon('todo-done', css_class: 'todo-undone') : _('Mark todo as done')
+- todo_content = is_collapsed ? sprite_icon('todo-add') : _('Add todo')
 
 %button.issuable-todo-btn.js-issuable-todo{ type: 'button',
   class: (is_collapsed ? 'btn-blank sidebar-collapsed-icon dont-change-state has-tooltip' : 'btn btn-default issuable-header-btn float-right'),

changelogs/unreleased/32959-update-todo-icon.yml

@@ -0,0 +1,5 @@
+---
+title: Update Todo icons in collapsed sidebar for Issues and MRs
+merge_request: 22534
+author:
+type: changed

spec/javascripts/collapsed_sidebar_todo_spec.js

@@ -45,8 +45,10 @@ describe('Issuable right sidebar collapsed todo toggle', () => {
     expect(document.querySelector('.js-issuable-todo.sidebar-collapsed-icon')).not.toBeNull();
 
     expect(
-      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .fa-plus-square'),
-    ).not.toBeNull();
+      document
+        .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg use')
+        .getAttribute('xlink:href'),
+    ).toContain('todo-add');
 
     expect(
       document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
@@ -68,8 +70,10 @@ describe('Issuable right sidebar collapsed todo toggle', () => {
       ).not.toBeNull();
 
       expect(
-        document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .fa-check-square'),
-      ).not.toBeNull();
+        document
+          .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg.todo-undone use')
+          .getAttribute('xlink:href'),
+      ).toContain('todo-done');
 
       done();
     });