Add Octicon SVG spritemap (#10107)

* Add octicon SVG sprite Signed-off-by: jolheiser <john.olheiser@gmail.com> * Static prefix Signed-off-by: jolheiser <john.olheiser@gmail.com> * SVG for all repo icons Signed-off-by: jolheiser <john.olheiser@gmail.com> * make vendor Signed-off-by: jolheiser <john.olheiser@gmail.com> * Swap out octicons Signed-off-by: jolheiser <john.olheiser@gmail.com> * Move octicons to top of less imports Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix JS Signed-off-by: jolheiser <john.olheiser@gmail.com> * Definitely not a search/replace Signed-off-by: jolheiser <john.olheiser@gmail.com> * Missed regex Signed-off-by: jolheiser <john.olheiser@gmail.com> * Move to more generic calls and webpack Signed-off-by: jolheiser <john.olheiser@gmail.com> * make svg -> make webpack Signed-off-by: jolheiser <john.olheiser@gmail.com> * Remove svg-sprite Signed-off-by: jolheiser <john.olheiser@gmail.com> * Update tests Signed-off-by: jolheiser <john.olheiser@gmail.com> * Missed a test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Remove svg from makefile Signed-off-by: jolheiser <john.olheiser@gmail.com> * Suggestions Signed-off-by: jolheiser <john.olheiser@gmail.com> * Attempt to fix test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Update tests Signed-off-by: jolheiser <john.olheiser@gmail.com> * Revert timetracking test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Swap .octicon for .svg in less Signed-off-by: jolheiser <john.olheiser@gmail.com> * Add aria-hidden Signed-off-by: jolheiser <john.olheiser@gmail.com> * Replace mega-octicon Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix webpack globbing on Windows Signed-off-by: jolheiser <john.olheiser@gmail.com> * Revert Co-Authored-By: silverwind <me@silverwind.io> * Fix octions from upstream Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix Vue and missed JS function Signed-off-by: jolheiser <john.olheiser@gmail.com> * Add JS helper and PWA Signed-off-by: jolheiser <john.olheiser@gmail.com> * Preload SVG Signed-off-by: jolheiser <john.olheiser@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: techknowlogick <matti@mdranta.net>
2025-07-22 18:28:37 +00:00 · 2020-02-11 11:02:41 -06:00
parent e704f7fae7
commit 86fdba177a
112 changed files with 1387 additions and 1122 deletions
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -15,7 +15,7 @@
 				<div class="two column row">
 					<a class="reference column" href="#" data-target="#branch-list">
 						<span class="text black">
-							<i class="octicon octicon-git-branch"></i> {{.i18n.Tr "repo.branches"}}
+							{{svg "octicon-git-branch" 16}} {{.i18n.Tr "repo.branches"}}
 						</span>
 					</a>
 					<a class="reference column" href="#" data-target="#tag-list">
@@ -40,4 +40,4 @@
 </div>

 <div class="ui divider"></div>
-{{end}}
+{{end}}
--- a/templates/repo/issue/labels.tmpl
+++ b/templates/repo/issue/labels.tmpl
@@ -98,18 +98,18 @@
 				<li class="item">
 					<div class="ui grid">
 						<div class="three wide column">
-							<div class="ui label has-emoji" style="color: {{.ForegroundColor}}; background-color: {{.Color}}"><i class="octicon octicon-tag"></i> {{.Name}}</div>
+							<div class="ui label has-emoji" style="color: {{.ForegroundColor}}; background-color: {{.Color}}">{{svg "octicon-tag" 16}} {{.Name}}</div>
 						</div>
 						<div class="seven wide column">
 							{{.Description}}
 						</div>
 						<div class="three wide column">
-							<a class="ui right open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}"><i class="octicon octicon-issue-opened"></i> {{$.i18n.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
+							<a class="ui right open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened" 16}} {{$.i18n.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
 						</div>
 						<div class="three wide column">
 							{{if and (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}}
-							<a class="ui right delete-button" href="#" data-url="{{$.RepoLink}}/labels/delete" data-id="{{.ID}}"><i class="octicon octicon-trashcan"></i> {{$.i18n.Tr "repo.issues.label_delete"}}</a>
-							<a class="ui right edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" data-description="{{.Description}}" data-color={{.Color}}><i class="octicon octicon-pencil"></i> {{$.i18n.Tr "repo.issues.label_edit"}}</a>
+							<a class="ui right delete-button" href="#" data-url="{{$.RepoLink}}/labels/delete" data-id="{{.ID}}">{{svg "octicon-trashcan" 16}} {{$.i18n.Tr "repo.issues.label_delete"}}</a>
+							<a class="ui right edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil" 16}} {{$.i18n.Tr "repo.issues.label_edit"}}</a>
 						{{end}}
 						</div>
 					</div>
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -30,11 +30,11 @@
 			<div class="six wide column">
 				<div class="ui tiny basic status buttons">
 					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-						<i class="octicon octicon-issue-opened"></i>
+						{{svg "octicon-issue-opened" 16}}
 						{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
 					</a>
 					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-						<i class="octicon octicon-issue-closed"></i>
+						{{svg "octicon-issue-closed" 16}}
 						{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
 					</a>
 				</div>
@@ -51,7 +51,7 @@
 							<span class="info">{{.i18n.Tr "repo.issues.filter_label_exclude" | Safe}}</span>
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_label_no_select"}}</a>
 							{{range .Labels}}
-								<a class="item has-emoji label-filter-item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.QueryString}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}" data-label-id="{{.ID}}"><span class="octicon {{if .IsExcluded}}octicon-circle-slash{{else if .IsSelected}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}</a>
+								<a class="item has-emoji label-filter-item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.QueryString}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}" data-label-id="{{.ID}}">{{if .IsExcluded}}{{svg "octicon-circle-slash" 16}}{{else if .IsSelected}}{{svg "octicon-check" 16}}{{end}}<span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}</a>
 							{{end}}
 						</div>
 					</div>
@@ -124,11 +124,11 @@
 			<div class="six wide column">
 				<div class="ui tiny basic status buttons">
 					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-						<i class="octicon octicon-issue-opened"></i>
+						{{svg "octicon-issue-opened" 16}}
 						{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
 					</a>
 					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-						<i class="octicon octicon-issue-closed"></i>
+						{{svg "octicon-issue-closed" 16}}
 						{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
 					</a>
 				</div>
@@ -155,7 +155,7 @@
 						<div class="menu">
 							{{range .Labels}}
 								<div class="item issue-action has-emoji" data-action="toggle" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/labels">
-									<span class="octicon {{if contain $.SelLabelIDs .ID}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
+									{{if contain $.SelLabelIDs .ID}}{{svg "octicon-check" 16}}{{end}}<span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
 								</div>
 							{{end}}
 						</div>
@@ -223,11 +223,11 @@
 					{{end}}

 					{{if .NumComments}}
-						<span class="comment ui right"><i class="octicon octicon-comment"></i> {{.NumComments}}</span>
+						<span class="comment ui right">{{svg "octicon-comment" 16}} {{.NumComments}}</span>
 					{{end}}

 					{{if .TotalTrackedTime}}
-						<span class="comment ui right"><i class="octicon octicon-clock"></i> {{.TotalTrackedTime | Sec2Time}}</span>
+						<span class="comment ui right">{{svg "octicon-clock" 16}} {{.TotalTrackedTime | Sec2Time}}</span>
 					{{end}}

 					<p class="desc">
@@ -242,24 +242,24 @@

 						{{if .Milestone}}
 							<a class="milestone" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{.Milestone.ID}}&assignee={{$.AssigneeID}}">
-								<span class="octicon octicon-milestone"></span> {{.Milestone.Name}}
+								{{svg "octicon-milestone" 16}} {{.Milestone.Name}}
 							</a>
 						{{end}}
 						{{if .Ref}}
 							<a class="ref" href="{{$.RepoLink}}/src/branch/{{.Ref | PathEscapeSegments}}">
-								<span class="octicon octicon-git-branch"></span> {{.Ref}}
+								{{svg "octicon-git-branch" 16}} {{.Ref}}
 							</a>
 						{{end}}
 						{{$tasks := .GetTasks}}
 						{{if gt $tasks 0}}
 							{{$tasksDone := .GetTasksDone}}
 							<span class="checklist">
-								<span class="octicon octicon-checklist"></span> {{$tasksDone}} / {{$tasks}} <span class="progress-bar"><span class="progress" style="width:calc(100% * {{$tasksDone}} / {{$tasks}});"></span></span>
+								{{svg "octicon-checklist" 16}} {{$tasksDone}} / {{$tasks}} <span class="progress-bar"><span class="progress" style="width:calc(100% * {{$tasksDone}} / {{$tasks}});"></span></span>
 							</span>
 						{{end}}
 						{{if ne .DeadlineUnix 0}}
 							<span class="due-date poping up" data-content="{{$.i18n.Tr "repo.issues.due_date"}}" data-variation="tiny inverted" data-position="right center">
-								<span class="octicon octicon-calendar"></span><span{{if .IsOverdue}} class="overdue"{{end}}>{{.DeadlineUnix.FormatShort}}</span>
+								{{svg "octicon-calendar" 16}}<span{{if .IsOverdue}} class="overdue"{{end}}>{{.DeadlineUnix.FormatShort}}</span>
 							</span>
 						{{end}}
 						{{range .Assignees}}
@@ -269,7 +269,7 @@
 						{{end}}
 						{{if .IsPull}}
 							{{if and (not .PullRequest.HasMerged) ((len .PullRequest.ConflictedFiles) gt 0)}}
-								<span class="conflicting"><i class="octicon octicon-mirror"></i> {{$.i18n.Tr (TrN $.i18n.Lang (len .PullRequest.ConflictedFiles) "repo.pulls.num_conflicting_files_1" "repo.pulls.num_conflicting_files_n") (len .PullRequest.ConflictedFiles)}}</span>
+								<span class="conflicting">{{svg "octicon-mirror" 16}} {{$.i18n.Tr (TrN $.i18n.Lang (len .PullRequest.ConflictedFiles) "repo.pulls.num_conflicting_files_1" "repo.pulls.num_conflicting_files_n") (len .PullRequest.ConflictedFiles)}}</span>
 							{{end}}
 						{{end}}
 					</p>
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -7,7 +7,7 @@
 				<h3>{{.Milestone.Name}}</h3>
 			</div>
 			<div class="column center aligned">
-				
+
 			</div>
 			{{if not .Repository.IsArchived}}
 				<div class="column right aligned">
@@ -22,16 +22,16 @@
            <div class="column">
                {{ $closedDate:= TimeSinceUnix .Milestone.ClosedDateUnix $.Lang }}
                {{if .IsClosed}}
-                    <span class="octicon octicon-clock"></span> {{$.i18n.Tr "repo.milestones.closed" $closedDate|Str2html}}
+					{{svg "octicon-clock" 16}} {{$.i18n.Tr "repo.milestones.closed" $closedDate|Str2html}}
                {{else}}
-                    <span class="octicon octicon-calendar"></span>
+					{{svg "octicon-calendar" 16}}
                    {{if .Milestone.DeadlineString}}
                        <span {{if .IsOverdue}}class="overdue"{{end}}>{{.Milestone.DeadlineString}}</span>
                    {{else}}
                        {{$.i18n.Tr "repo.milestones.no_due_date"}}
                    {{end}}
                {{end}}
-                &nbsp; 
+                &nbsp;
                <b>{{.i18n.Tr "repo.milestones.completeness" .Milestone.Completeness}}</b>
            </div>
        </div>
@@ -40,11 +40,11 @@
 			<div class="six wide column">
 				<div class="ui tiny basic status buttons">
 					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&assignee={{.AssigneeID}}">
-						<i class="octicon octicon-issue-opened"></i>
+						{{svg "octicon-issue-opened" 16}}
 						{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
 					</a>
 					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&assignee={{.AssigneeID}}">
-						<i class="octicon octicon-issue-closed"></i>
+						{{svg "octicon-issue-closed" 16}}
 						{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
 					</a>
 				</div>
@@ -61,7 +61,7 @@
 							<span class="info">{{.i18n.Tr "repo.issues.filter_label_exclude" | Safe}}</span>
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_label_no_select"}}</a>
 							{{range .Labels}}
-								<a class="item has-emoji label-filter-item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.ID}}&assignee={{$.AssigneeID}}" data-label-id="{{.ID}}"><span class="octicon {{if .IsExcluded}}octicon-circle-slash{{else if contain $.SelLabelIDs .ID}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}</a>
+								<a class="item has-emoji label-filter-item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.ID}}&assignee={{$.AssigneeID}}" data-label-id="{{.ID}}">{{if .IsExcluded}}{{svg "octicon-circle-slash" 16}}{{else if contain $.SelLabelIDs .ID}}{{svg "octicon-check" 16}}{{end}}"><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}</a>
 							{{end}}
 						</div>
 					</div>
@@ -118,11 +118,11 @@
 			<div class="six wide column">
 				<div class="ui tiny basic status buttons">
 					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&assignee={{.AssigneeID}}">
-						<i class="octicon octicon-issue-opened"></i>
+						{{svg "octicon-issue-opened" 16}}
 						{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
 					</a>
 					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&assignee={{.AssigneeID}}">
-						<i class="octicon octicon-issue-closed"></i>
+						{{svg "octicon-issue-closed" 16}}
 						{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
 					</a>
 				</div>
@@ -149,7 +149,7 @@
 						<div class="menu">
 							{{range .Labels}}
 								<div class="item issue-action has-emoji" data-action="toggle" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/labels">
-									<span class="octicon {{if contain $.SelLabelIDs .ID}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
+									{{if contain $.SelLabelIDs .ID}}{{svg "octicon-check" 16}}{{end}}"><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
 								</div>
 							{{end}}
 						</div>
@@ -193,11 +193,11 @@
 					{{end}}

 					{{if .NumComments}}
-						<span class="comment ui right"><i class="octicon octicon-comment"></i> {{.NumComments}}</span>
+						<span class="comment ui right">{{svg "octicon-comment" 16}} {{.NumComments}}</span>
 					{{end}}

 					{{if .TotalTrackedTime}}
-						<span class="comment ui right"><i class="octicon octicon-clock"></i> {{.TotalTrackedTime | Sec2Time}}</span>
+						<span class="comment ui right">{{svg "octicon-clock" 16}} {{.TotalTrackedTime | Sec2Time}}</span>
 					{{end}}

 					<p class="desc">
@@ -208,18 +208,18 @@
 						{{end}}
 						{{if .Ref}}
 							<a class="ref" href="{{$.RepoLink}}/src/branch/{{.Ref}}">
-								<span class="octicon octicon-git-branch"></span> {{.Ref}}
+								{{svg "octicon-git-branch" 16}} {{.Ref}}
 							</a>
 						{{end}}
 						{{$tasks := .GetTasks}}
 						{{if gt $tasks 0}}
 							{{$tasksDone := .GetTasksDone}}
 							<span class="checklist">
-								<span class="octicon octicon-checklist"></span> {{$tasksDone}} / {{$tasks}} <span class="progress-bar"><span class="progress" style="width:calc(100% * {{$tasksDone}} / {{$tasks}});"></span></span>
+								{{svg "octicon-checklist" 16}} {{$tasksDone}} / {{$tasks}} <span class="progress-bar"><span class="progress" style="width:calc(100% * {{$tasksDone}} / {{$tasks}});"></span></span>
 							</span>
 						{{end}}
 						{{if ne .DeadlineUnix 0}}
-							<span class="octicon octicon-calendar"></span>
+							{{svg "octicon-calendar" 16}}
 							<span{{if .IsOverdue}} class="overdue"{{end}}>{{.DeadlineUnix.FormatShort}}</span>
 						{{end}}
 						{{range .Assignees}}
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -14,11 +14,11 @@
 		{{template "base/alert" .}}
 		<div class="ui tiny basic buttons">
 			<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{.RepoLink}}/milestones?state=open">
-				<i class="octicon octicon-milestone"></i>
+				{{svg "octicon-milestone" 16}}
 				{{.i18n.Tr "repo.milestones.open_tab" .OpenCount}}
 			</a>
 			<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{.RepoLink}}/milestones?state=closed">
-				<i class="octicon octicon-milestone"></i>
+				{{svg "octicon-milestone" 16}}
 				{{.i18n.Tr "repo.milestones.close_tab" .ClosedCount}}
 			</a>
 		</div>
@@ -43,7 +43,7 @@
 		<div class="milestone list">
 			{{range .Milestones}}
 				<li class="item">
-					<i class="octicon octicon-milestone"></i> <a href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
+					{{svg "octicon-milestone" 16}} <a href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
 					<div class="ui right green progress" data-percent="{{.Completeness}}">
 						<div class="bar" {{if not .Completeness}}style="background-color: transparent"{{end}}>
 							<div class="progress"></div>
@@ -52,9 +52,9 @@
 					<div class="meta">
 						{{ $closedDate:= TimeSinceUnix .ClosedDateUnix $.Lang }}
 						{{if .IsClosed}}
-							<span class="octicon octicon-clock"></span> {{$.i18n.Tr "repo.milestones.closed" $closedDate|Str2html}}
+							{{svg "octicon-clock" 16}} {{$.i18n.Tr "repo.milestones.closed" $closedDate|Str2html}}
 						{{else}}
-							<span class="octicon octicon-calendar"></span>
+							{{svg "octicon-calendar" 16}}
 							{{if .DeadlineString}}
 								<span {{if .IsOverdue}}class="overdue"{{end}}>{{.DeadlineString}}</span>
 							{{else}}
@@ -62,20 +62,20 @@
 							{{end}}
 						{{end}}
 						<span class="issue-stats">
-							<i class="octicon octicon-issue-opened"></i> {{$.i18n.Tr "repo.issues.open_tab" .NumOpenIssues}}
-							<i class="octicon octicon-issue-closed"></i> {{$.i18n.Tr "repo.issues.close_tab" .NumClosedIssues}}
-							{{if .TotalTrackedTime}}<i class="octicon octicon-clock"></i> {{.TotalTrackedTime|Sec2Time}}{{end}}
+							{{svg "octicon-issue-opened" 16}} {{$.i18n.Tr "repo.issues.open_tab" .NumOpenIssues}}
+							{{svg "octicon-issue-closed" 16}} {{$.i18n.Tr "repo.issues.close_tab" .NumClosedIssues}}
+							{{if .TotalTrackedTime}}{{svg "octicon-clock" 16}} {{.TotalTrackedTime|Sec2Time}}{{end}}
 						</span>
 					</div>
 					{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
 						<div class="ui right operate">
-							<a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-pencil"></i> {{$.i18n.Tr "repo.issues.label_edit"}}</a>
+							<a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-pencil" 16}} {{$.i18n.Tr "repo.issues.label_edit"}}</a>
 							{{if .IsClosed}}
-								<a href="{{$.Link}}/{{.ID}}/open" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-check"></i> {{$.i18n.Tr "repo.milestones.open"}}</a>
+								<a href="{{$.Link}}/{{.ID}}/open" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-check" 16}} {{$.i18n.Tr "repo.milestones.open"}}</a>
 							{{else}}
-								<a href="{{$.Link}}/{{.ID}}/close" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-x"></i> {{$.i18n.Tr "repo.milestones.close"}}</a>
+								<a href="{{$.Link}}/{{.ID}}/close" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-x" 16}} {{$.i18n.Tr "repo.milestones.close"}}</a>
 							{{end}}
-							<a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}"><i class="octicon octicon-trashcan"></i> {{$.i18n.Tr "repo.issues.label_delete"}}</a>
+							<a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}">{{svg "octicon-trashcan" 16}} {{$.i18n.Tr "repo.issues.label_delete"}}</a>
 						</div>
 					{{end}}
 					{{if .Content}}
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -41,12 +41,12 @@
 			<div class="ui {{if not .Labels}}disabled{{end}} floating jump select-label dropdown">
 				<span class="text">
 					<strong>{{.i18n.Tr "repo.issues.new.labels"}}</strong>
-					<span class="octicon octicon-gear"></span>
+					{{svg "octicon-gear" 16}}
 				</span>
 				<div class="filter menu" data-id="#label_ids">
 					<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_labels"}}</div>
 					{{range .Labels}}
-						<a class="{{if .IsChecked}}checked{{end}} item has-emoji" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon {{if .IsChecked}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
+						<a class="{{if .IsChecked}}checked{{end}} item has-emoji" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{svg "octicon-check" 16}}</span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
 						{{if .Description }}<br><small class="desc">{{.Description}}</small>{{end}}</a>
 					{{end}}
 				</div>
@@ -64,14 +64,14 @@
 			<div class="ui {{if not (or .OpenMilestones .ClosedMilestones)}}disabled{{end}} floating jump select-milestone dropdown">
 				<span class="text">
 					<strong>{{.i18n.Tr "repo.issues.new.milestone"}}</strong>
-					<span class="octicon octicon-gear"></span>
+					{{svg "octicon-gear" 16}}
 				</span>
 				<div class="menu">
 					<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_milestone"}}</div>
 					{{if .OpenMilestones}}
 						<div class="divider"></div>
 						<div class="header">
-							<i class="octicon octicon-milestone"></i>
+							{{svg "octicon-milestone" 16}}
 							{{.i18n.Tr "repo.issues.new.open_milestone"}}
 						</div>
 						{{range .OpenMilestones}}
@@ -81,7 +81,7 @@
 					{{if .ClosedMilestones}}
 						<div class="divider"></div>
 						<div class="header">
-							<i class="octicon octicon-milestone"></i>
+							{{svg "octicon-milestone" 16}}
 							{{.i18n.Tr "repo.issues.new.closed_milestone"}}
 						</div>
 						{{range .ClosedMilestones}}
@@ -105,13 +105,13 @@
 				<div class="ui {{if not .Assignees}}disabled{{end}} floating jump select-assignees dropdown">
 					<span class="text">
 						<strong>{{.i18n.Tr "repo.issues.new.assignees"}}</strong>
-						<span class="octicon octicon-gear"></span>
+						{{svg "octicon-gear" 16}}
 					</span>
 					<div class="filter menu" data-id="#assignee_ids">
 						<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
 						{{range .Assignees}}
 							<a class="item" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
-								<span class="octicon"></span>
+								<span class="octicon-check invisible">{{svg "octicon-check" 16}}</span>
 								<span class="text">
 									<img class="ui avatar image" src="{{.RelAvatarLink}}"> {{.GetDisplayName}}
 								</span>
--- a/templates/repo/issue/view_content/add_reaction.tmpl
+++ b/templates/repo/issue/view_content/add_reaction.tmpl
@@ -1,8 +1,8 @@
 {{if .ctx.IsSigned}}
 <div class="item action ui pointing top right select-reaction dropdown" data-action-url="{{ .ActionURL }}">
 	<a class="add-reaction">
-		<i class="octicon octicon-plus-small" style="width: 10px"></i>
-		<i class="octicon octicon-smiley"></i>
+		{{svg "octicon-plus-small" 16}}
+		{{svg "octicon-smiley" 16}}
 	</a>
 	<div class="menu has-emoji">
 		<div class="header">{{ .ctx.i18n.Tr "repo.pick_reaction"}}</div>
--- a/templates/repo/issue/view_content/attachments.tmpl
+++ b/templates/repo/issue/view_content/attachments.tmpl
@@ -3,7 +3,7 @@
    {{if FilenameIsImage .Name}}
      <img class="ui image" src="{{.DownloadURL}}" title='{{$.ctx.i18n.Tr "repo.issues.attachment.open_tab" .Name}}'>
    {{else}}
-      <span class="ui image octicon octicon-desktop-download" title='{{$.ctx.i18n.Tr "repo.issues.attachment.download" .Name}}'></span>
+      <span class="ui image" title='{{$.ctx.i18n.Tr "repo.issues.attachment.download" .Name}}'>{{svg "octicon-desktop-download" 16}}</span>
    {{end}}
  </a>
 {{end}}
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -70,7 +70,7 @@
 		</div>
 	{{else if eq .Type 1}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -78,7 +78,7 @@
 		</div>
 	{{else if eq .Type 2}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-circle-slash issue-symbol"></span>
+			<span class="issue-symbol">{{svg "octicon-circle-slash" 16}}</span>
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -99,7 +99,7 @@
 		{{end}}
 		{{ $createdStr:= TimeSinceUnix .CreatedUnix $.Lang }}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-bookmark"></span>
+			{{svg "octicon-bookmark" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -115,21 +115,21 @@
 		</div>
 	{{else if eq .Type 4}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-bookmark"></span>
+			{{svg "octicon-bookmark" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
 			<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a> {{$.i18n.Tr "repo.issues.commit_ref_at" .EventTag $createdStr | Safe}}</span>

 			<div class="detail">
-				<span class="octicon octicon-git-commit"></span>
+				{{svg "octicon-git-commit" 16}}
 				<span class="text grey">{{.Content | Str2html}}</span>
 			</div>
 		</div>
 	{{else if eq .Type 7}}
 		{{if .Label}}
 			<div class="event" id="{{.HashTag}}">
-				<span class="octicon octicon-primitive-dot"></span>
+				{{svg "octicon-primitive-dot" 16}}
 				<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 					<img src="{{.Poster.RelAvatarLink}}">
 				</a>
@@ -139,7 +139,7 @@
 		{{end}}
 	{{else if eq .Type 8}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -148,7 +148,7 @@
 		</div>
 	{{else if eq .Type 9}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			{{if gt .AssigneeID 0}}
 				{{if .RemovedAssignee}}
 					<a class="ui avatar image" href="{{.Assignee.HomeLink}}">
@@ -179,7 +179,7 @@
 		</div>
 	{{else if eq .Type 10}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -189,7 +189,7 @@
 		</div>
 	{{else if eq .Type 11}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -199,7 +199,7 @@
 		</div>
 	{{else if eq .Type 12}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -207,32 +207,32 @@
 		</div>
 	{{else if eq .Type 13}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
 			<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a> {{$.i18n.Tr "repo.issues.stop_tracking_history"  $createdStr | Safe}}</span>

 			<div class="detail">
-				<span class="octicon octicon-clock"></span>
+				{{svg "octicon-clock" 16}}
 				<span class="text grey">{{.Content}}</span>
 			</div>
 		</div>
 	{{else if eq .Type 14}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
 			<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a> {{$.i18n.Tr "repo.issues.add_time_history"  $createdStr | Safe}}</span>
 			<div class="detail">
-				<span class="octicon octicon-clock"></span>
+				{{svg "octicon-clock" 16}}
 				<span class="text grey">{{.Content}}</span>
 			</div>
 		</div>
 	{{else if eq .Type 15}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -240,7 +240,7 @@
 		</div>
 	{{else if eq .Type 16}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -250,7 +250,7 @@
 		</div>
 	{{else if eq .Type 17}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -260,7 +260,7 @@
 		</div>
 	{{else if eq .Type 18}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -270,7 +270,7 @@
 		</div>
 	{{else if eq .Type 19}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -279,7 +279,7 @@
 			</span>
 			{{if .DependentIssue}}
 				<div class="detail">
-					<span class="octicon octicon-plus"></span>
+					{{svg "octicon-plus" 16}}
 					<span class="text grey">
 						<a href="{{.DependentIssue.HTMLURL}}">
 							{{if eq .DependentIssue.RepoID .Issue.RepoID}}
@@ -294,7 +294,7 @@
 		</div>
 	{{else if eq .Type 20}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -303,7 +303,7 @@
 			</span>
 			{{if .DependentIssue}}
 				<div class="detail">
-					<span class="text grey octicon octicon-trashcan"></span>
+					<span class="text grey">{{svg "octicon-trashcan" 16}}</span>
 					<span class="text grey">
 						<a href="{{.DependentIssue.HTMLURL}}">
 							{{if eq .DependentIssue.RepoID .Issue.RepoID}}
@@ -318,7 +318,7 @@
 		</div>
 	{{else if eq .Type 22}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-{{.Review.Type.Icon}} issue-symbol"></span>
+			<span class="issue-symbol">{{svg (printf "octicon-%s" .Review.Type.Icon) 16}}</span>
 			{{if .OriginalAuthor }}
 			{{else}}
 				<a class="ui avatar image"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
@@ -344,7 +344,7 @@
 			</span>
 			{{if .Content}}
 				<div class="detail">
-					<span class="octicon octicon-quote"></span>
+					{{svg "octicon-quote" 16}}
 					<span class="text grey has-emoji">{{.Content}}</span>
 				</div>
 			{{end}}
@@ -355,11 +355,11 @@
 								{{$invalid := (index $comms 0).Invalidated}}
 							{{if $invalid}}
 								<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="ui compact right labeled button show-outdated">
-									<i class="octicon octicon-fold"></i>
+									{{svg "octicon-fold" 16}}
 									{{$.i18n.Tr "repo.issues.review.show_outdated"}}
 								</button>
 								<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="hide ui compact right labeled button hide-outdated">
-									<i class="octicon octicon-fold"></i>
+									{{svg "octicon-fold" 16}}
 									{{$.i18n.Tr "repo.issues.review.hide_outdated"}}
 								</button>
 							{{end}}
@@ -417,7 +417,7 @@
 		</div>
 	{{else if eq .Type 23}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-lock issue-symbol"></span>
+			<span class="issue-symbol">{{svg "octicon-lock" 16}}</span>
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -434,7 +434,7 @@
 		</div>
 	{{else if eq .Type 24}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-key issue-symbol"></span>
+			<span class="issue-symbol">{{svg "octicon-key" 16}}</span>
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -445,7 +445,7 @@
 		</div>
 	{{else if eq .Type 25}}
 		<div class="event">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
@@ -455,13 +455,13 @@
 		</div>
 	{{else if eq .Type 26}}
 		<div class="event" id="{{.HashTag}}">
-			<span class="octicon octicon-primitive-dot"></span>
+			{{svg "octicon-primitive-dot" 16}}
 			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
 				<img src="{{.Poster.RelAvatarLink}}">
 			</a>
 			<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a> {{$.i18n.Tr "repo.issues.del_time_history"  $createdStr | Safe}}</span>
 			<div class="detail">
-				<span class="octicon octicon-clock"></span>
+				{{svg "octicon-clock" 16}}
 				<span class="text grey">{{.Content}}</span>
 			</div>
 		</div>
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -11,7 +11,7 @@
 							{{else if eq .Type 2}}grey
 							{{else if eq .Type 3}}red
 							{{else}}grey{{end}}">
-							<span class="octicon octicon-{{.Type.Icon}}"></span>
+							{{svg (printf "octicon-%s" .Type.Icon) 16}}
 						</span>
 						{{if .Stale}}
 						<span class="type-icon text grey">
@@ -52,7 +52,7 @@
 	{{else if and .RequireSigned (not .WillSign)}}}red
 	{{else if .Issue.PullRequest.IsChecking}}yellow
 	{{else if .Issue.PullRequest.CanAutoMerge}}green
-	{{else}}red{{end}}"><span class="mega-octicon octicon-git-merge"></span></a>
+	{{else}}red{{end}}">{{svg "octicon-git-merge" 32}}</a>
 	<div class="content">
 		{{template "repo/pulls/status" .}}
 		<div class="ui {{if not $.LatestCommitStatus}}top attached header{{else}}attached merge-section segment{{end}}">
@@ -87,7 +87,7 @@
 				{{end}}
 			{{else if .IsPullFilesConflicted}}
 				<div class="item text grey">
-					<span class="octicon octicon-x"></span>
+					{{svg "octicon-x" 16}}
 					{{$.i18n.Tr "repo.pulls.files_conflicted"}}
 					{{range .ConflictedFiles}}
 						<div>{{.}}</div>
@@ -95,38 +95,38 @@
 				</div>
 			{{else if .IsPullRequestBroken}}
 				<div class="item text red">
-					<i class="icon icon-octicon"><span class="octicon octicon-x"></span></i>
+					<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
 					{{$.i18n.Tr "repo.pulls.data_broken"}}
 				</div>
 			{{else if .IsPullWorkInProgress}}
 				<div class="item text grey">
-					<i class="icon icon-octicon"><span class="octicon octicon-x"></span></i>
+					<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
 					{{$.i18n.Tr "repo.pulls.cannot_merge_work_in_progress" .WorkInProgressPrefix | Str2html}}
 				</div>
 			{{else if .Issue.PullRequest.IsChecking}}
 				<div class="item text yellow">
-					<i class="icon icon-octicon"><span class="octicon octicon-sync"></span></i>
+					<i class="icon icon-octicon">{{svg "octicon-sync" 16}}</i>
 					{{$.i18n.Tr "repo.pulls.is_checking"}}
 				</div>
 			{{else if .Issue.PullRequest.CanAutoMerge}}
 				{{if .IsBlockedByApprovals}}
 					<div class="item text red">
-						<i class="icon icon-octicon"><span class="octicon octicon-x"></span></i>
+						<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
 					{{$.i18n.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .Issue.PullRequest.ProtectedBranch.RequiredApprovals}}
 					</div>
 				{{else if .IsBlockedByRejection}}
 					<div class="item text red">
-						<i class="icon icon-octicon"><span class="octicon octicon-x"></span></i>
+						<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
 					{{$.i18n.Tr "repo.pulls.blocked_by_rejection"}}
 					</div>
 				{{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}}
 					<div class="item text red">
-						<i class="icon icon-octicon"><span class="octicon octicon-x"></span></i>
+						<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
 						{{$.i18n.Tr "repo.pulls.required_status_check_failed"}}
 					</div>
 				{{else if and .RequireSigned (not .WillSign)}}
 					<div class="item text red">
-						<i class="icon icon-octicon"><span class="octicon octicon-x"></span></i>
+						<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
 						{{$.i18n.Tr "repo.pulls.require_signed_wont_sign"}}
 					</div>
 					<div class="item text yellow">
@@ -138,12 +138,12 @@
 				{{if and (or $.IsRepoAdmin (not $notAllOverridableChecksOk)) (or (not .RequireSigned) .WillSign)}}
 					{{if $notAllOverridableChecksOk}}
 						<div class="item text yellow">
-							<i class="icon icon-octicon"><span class="octicon octicon-primitive-dot"></span></i>
+							<i class="icon icon-octicon">{{svg "octicon-primitive-dot" 16}}</i>
 							{{$.i18n.Tr "repo.pulls.required_status_check_administrator"}}
 						</div>
 					{{else}}
 						<div class="item text green">
-							<i class="icon icon-octicon"><span class="octicon octicon-check"></span></i>
+							<i class="icon icon-octicon">{{svg "octicon-check" 16}}</i>
 							{{$.i18n.Tr "repo.pulls.can_auto_merge_desc"}}
 						</div>
 					{{end}}
@@ -162,7 +162,7 @@
 					<div class="ui very compact branch-update grid">
  						<div class="row">
 							<div class="item text gray eleven wide left floated column">
-								<i class="icon icon-octicon"><span class="octicon octicon-alert"></span></i>
+								<i class="icon icon-octicon">{{svg "octicon-alert" 16}}</i>
 								{{$.i18n.Tr "repo.pulls.outdated_with_base_branch"}}
 							</div>
 							{{if .UpdateAllowed}}
@@ -256,7 +256,7 @@
 							{{end}}
 							<div class="ui {{if $notAllOverridableChecksOk}}red{{else}}green{{end}} buttons merge-button">
 								<button class="ui button" data-do="{{.MergeStyle}}">
-									<span class="octicon octicon-git-merge"></span>
+									{{svg "octicon-git-merge" 16}}
 									<span class="button-text">
 									{{if eq .MergeStyle "merge"}}
 										{{$.i18n.Tr "repo.pulls.merge_pull_request"}}
@@ -292,17 +292,17 @@
 							</div>
 						{{else}}
 							<div class="item text red">
-								<span class="octicon octicon-x"></span>
+								{{svg "octicon-x" 16}}
 								{{$.i18n.Tr "repo.pulls.no_merge_desc"}}
 							</div>
 							<div class="item text grey">
-								<span class="octicon octicon-info"></span>
+								{{svg "octicon-info" 16}}
 								{{$.i18n.Tr "repo.pulls.no_merge_helper"}}
 							</div>
 						{{end}}
 					{{else}}
 						<div class="item text grey">
-							<span class="octicon octicon-info"></span>
+							{{svg "octicon-info" 16}}
 							{{$.i18n.Tr "repo.pulls.no_merge_access"}}
 						</div>
 					{{end}}
@@ -311,31 +311,31 @@
 				{{/* Merge conflict without specific file. Suggest manual merge, only if all reviews and status checks OK. */}}
 				{{if .IsBlockedByApprovals}}
 					<div class="item text red">
-						<span class="octicon octicon-x"></span>
+						{{svg "octicon-x" 16}}
 					{{$.i18n.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .Issue.PullRequest.ProtectedBranch.RequiredApprovals}}
 					</div>
 				{{else if .IsBlockedByRejection}}
 					<div class="item text red">
-						<span class="octicon octicon-x"></span>
+						{{svg "octicon-x" 16}}
 					{{$.i18n.Tr "repo.pulls.blocked_by_rejection"}}
 					</div>
 				{{else if and .EnableStatusCheck (not .IsRequiredStatusCheckSuccess)}}
 					<div class="item text red">
-						<span class="octicon octicon-x"></span>
+						{{svg "octicon-x" 16}}
 						{{$.i18n.Tr "repo.pulls.required_status_check_failed"}}
 					</div>
 				{{else if and .RequireSigned (not .WillSign)}}
 					<div class="item text red">
-						<span class="octicon octicon-x"></span>
+						{{svg "octicon-x" 16}}
 						{{$.i18n.Tr "repo.pulls.require_signed_wont_sign"}}
 					</div>
 				{{else}}
 					<div class="item text red">
-						<span class="octicon octicon-x"></span>
+						{{svg "octicon-x" 16}}
 						{{$.i18n.Tr "repo.pulls.cannot_auto_merge_desc"}}
 					</div>
 					<div class="item text grey">
-						<span class="octicon octicon-info"></span>
+						{{svg "octicon-info" 16}}
 						{{$.i18n.Tr "repo.pulls.cannot_auto_merge_helper"}}
 					</div>
 				{{end}}
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -5,12 +5,12 @@
 		<div class="ui {{if or (not .IsIssueWriter) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
 			<span class="text">
 				<strong>{{.i18n.Tr "repo.issues.new.labels"}}</strong>
-				<span class="octicon octicon-gear"></span>
+				{{svg "octicon-gear" 16}}
 			</span>
 			<div class="filter menu labels" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels">
 				<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_labels"}}</div>
 				{{range .Labels}}
-					<a class="{{if .IsChecked}}checked{{end}} item has-emoji" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon {{if .IsChecked}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
+					<a class="{{if .IsChecked}}checked{{end}} item has-emoji" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{svg "octicon-check" 16}}</span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
 					{{if .Description }}<br><small class="desc">{{.Description}}</small>{{end}}</a>
 				{{end}}
 			</div>
@@ -30,14 +30,14 @@
 		<div class="ui {{if or (not .IsIssueWriter) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
 			<span class="text">
 				<strong>{{.i18n.Tr "repo.issues.new.milestone"}}</strong>
-				<span class="octicon octicon-gear"></span>
+				{{svg "octicon-gear" 16}}
 			</span>
 			<div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/milestone">
 				<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_milestone"}}</div>
 				{{if .OpenMilestones}}
 					<div class="divider"></div>
 					<div class="header">
-						<i class="octicon octicon-milestone"></i>
+						{{svg "octicon-milestone" 16}}
 						{{.i18n.Tr "repo.issues.new.open_milestone"}}
 					</div>
 					{{range .OpenMilestones}}
@@ -47,7 +47,7 @@
 				{{if .ClosedMilestones}}
 					<div class="divider"></div>
 					<div class="header">
-						<i class="octicon octicon-milestone"></i>
+						{{svg "octicon-milestone" 16}}
 						{{.i18n.Tr "repo.issues.new.closed_milestone"}}
 					</div>
 					{{range .ClosedMilestones}}
@@ -71,7 +71,7 @@
 		<div class="ui {{if or (not .IsIssueWriter) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown">
 			<span class="text">
 				<strong>{{.i18n.Tr "repo.issues.new.assignees"}}</strong>
-				<span class="octicon octicon-gear"></span>
+				{{svg "octicon-gear" 16}}
 			</span>
 			<div class="filter menu" data-action="" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/assignee">
 				<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
@@ -83,11 +83,13 @@
 						 checked
 						{{end}}
 					{{end}}" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
-						<span class="octicon{{range $.Issue.Assignees}}
-						{{if eq .ID $AssigneeID}}
-						 octicon-check
+						{{$checked := false}}
+						{{range $.Issue.Assignees}}
+							{{if eq .ID $AssigneeID}}
+								{{$checked = true}}
+							{{end}}
 						{{end}}
-					{{end}}"></span>
+						<span class="octicon-check {{if not $checked}}invisible{{end}}">{{svg "octicon-check" 16}}</span>
 						<span class="text">
 							<img class="ui avatar image" src="{{.RelAvatarLink}}"> {{.GetDisplayName}}
 						</span>
@@ -130,10 +132,10 @@
 						{{$.CsrfTokenHtml}}
 						<button class="fluid ui button">
 							{{if $.IssueWatch.IsWatching}}
-								<i class="octicon octicon-mute"></i>
+								{{svg "octicon-mute" 16}}
 								{{.i18n.Tr "repo.issues.unsubscribe"}}
 							{{else}}
-								<i class="octicon octicon-unmute"></i>
+								{{svg "octicon-unmute" 16}}
 								{{.i18n.Tr "repo.issues.subscribe"}}
 							{{end}}
 						</button>
@@ -218,7 +220,7 @@
 			</div>
 			{{if ne .Issue.DeadlineUnix 0}}
 				<p>
-					<span class="octicon octicon-calendar"></span>
+					{{svg "octicon-calendar" 16}}
 					{{.Issue.DeadlineUnix.FormatShort}}
 					{{if .Issue.IsOverdue}}
 						<span style="color: red;">{{.i18n.Tr "repo.issues.due_date_overdue"}}</span>
@@ -344,10 +346,10 @@
 				<div>
 					<button class="fluid ui  show-modal button {{if .Issue.IsLocked }} negative {{ end }}" data-modal="#lock">
 							{{if .Issue.IsLocked}}
-								<i class="octicon octicon-key"></i>
+								{{svg "octicon-key" 16}}
 								{{.i18n.Tr "repo.issues.unlock"}}
 							{{else}}
-								<i class="octicon octicon-lock"></i>
+								{{svg "octicon-lock" 16}}
 								{{.i18n.Tr "repo.issues.lock"}}
 							{{end}}
 						</button>
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -17,13 +17,13 @@
 		{{end}}
 	</div>
 	{{if .HasMerged}}
-		<div class="ui purple large label"><i class="octicon octicon-git-pull-request"></i> {{.i18n.Tr "repo.pulls.merged"}}</div>
+		<div class="ui purple large label">{{svg "octicon-gt-pull-request" 16}} {{.i18n.Tr "repo.pulls.merged"}}</div>
 	{{else if .Issue.IsClosed}}
-		<div class="ui red large label"><i class="octicon octicon-issue-closed"></i> {{.i18n.Tr "repo.issues.closed_title"}}</div>
+		<div class="ui red large label">{{svg "octicon-issue-closed" 16}} {{.i18n.Tr "repo.issues.closed_title"}}</div>
 	{{else if .Issue.IsPull}}
-		<div class="ui green large label"><i class="octicon octicon-git-pull-request"></i> {{.i18n.Tr "repo.issues.open_title"}}</div>
+		<div class="ui green large label">{{svg "octicon-git-pull-request" 16}} {{.i18n.Tr "repo.issues.open_title"}}</div>
 	{{else}}
-		<div class="ui green large label"><i class="octicon octicon-issue-opened"></i> {{.i18n.Tr "repo.issues.open_title"}}</div>
+		<div class="ui green large label">{{svg "octicon-issue-opened" 16}} {{.i18n.Tr "repo.issues.open_title"}}</div>
 	{{end}}

 	{{if .Issue.IsPull}}
@@ -51,7 +51,7 @@
                		<span class="text">{{.i18n.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span>
                	</div>
                </div>
-                <i class="octicon octicon-arrow-right"></i>
+                {{svg "octicon-arrow-right" 16}}
                 <div class="ui floating filter dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">
                	<div class="ui basic small button">
                		<span class="text" id="pull-target-branch" data-basename="{{$.BaseName}}" data-branch="{{$.BaseBranch}}">{{.i18n.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span>