1.icon {
2  background-position: center center;
3  background-repeat: no-repeat;
4  background-size: $icon-size;
5  -moz-context-properties: fill;
6  display: inline-block;
7  color: var(--newtab-text-primary-color);
8  fill: currentColor;
9  height: $icon-size;
10  vertical-align: middle;
11  width: $icon-size;
12
13  // helper classes
14  &.icon-spacer {
15    margin-inline-end: 8px;
16  }
17
18  &.icon-small-spacer {
19    margin-inline-end: 6px;
20  }
21
22  &.icon-button-style {
23    fill: var(--newtab-text-secondary-color);
24    border: 0;
25
26    &:focus,
27    &:hover {
28      fill: var(--newtab-text-primary-color);
29    }
30  }
31
32  // icon images
33  &.icon-bookmark-added {
34    background-image: url('chrome://browser/skin/bookmark.svg');
35  }
36
37  &.icon-bookmark-hollow {
38    background-image: url('chrome://browser/skin/bookmark-hollow.svg');
39  }
40
41  &.icon-clear-input {
42    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-cancel-16.svg');
43  }
44
45  &.icon-delete {
46    background-image: url('chrome://global/skin/icons/delete.svg');
47  }
48
49  &.icon-search {
50    background-image: url('chrome://global/skin/icons/search-glass.svg');
51  }
52
53  &.icon-modal-delete {
54    flex-shrink: 0;
55    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-modal-delete-32.svg');
56    background-size: $larger-icon-size;
57    height: $larger-icon-size;
58    width: $larger-icon-size;
59  }
60
61  &.icon-mail {
62    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-mail-16.svg');
63  }
64
65  &.icon-dismiss {
66    background-image: url('chrome://global/skin/icons/close.svg');
67  }
68
69  &.icon-info {
70    background-image: url('chrome://global/skin/icons/info.svg');
71  }
72
73  &.icon-new-window {
74    @include flip-icon;
75    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-newWindow-16.svg');
76  }
77
78  &.icon-new-window-private {
79    background-image: url('chrome://browser/skin/privateBrowsing.svg');
80  }
81
82  &.icon-settings {
83    background-image: url('chrome://global/skin/icons/settings.svg');
84  }
85
86  &.icon-pin {
87    @include flip-icon;
88    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pin-16.svg');
89  }
90
91  &.icon-unpin {
92    @include flip-icon;
93    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-unpin-16.svg');
94  }
95
96  &.icon-edit {
97    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg');
98  }
99
100  &.icon-pocket {
101    background-image: url('chrome://global/skin/icons/pocket.svg');
102  }
103
104  &.icon-pocket-save {
105    background-image: url('chrome://global/skin/icons/pocket-outline.svg');
106  }
107
108  &.icon-pocket-delete {
109    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg');
110  }
111
112  &.icon-pocket-archive {
113    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pocket-archive-16.svg');
114  }
115
116  &.icon-history-item {
117    background-image: url('chrome://browser/skin/history.svg');
118  }
119
120  &.icon-trending {
121    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-trending-16.svg');
122    transform: translateY(2px); // trending bolt is visually top heavy
123  }
124
125  &.icon-now {
126    background-image: url('chrome://browser/skin/history.svg');
127  }
128
129  &.icon-topsites {
130    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-topsites-16.svg');
131  }
132
133  &.icon-pin-small {
134    @include flip-icon;
135    background-image: url('chrome://browser/skin/pin-12.svg');
136    background-size: $smaller-icon-size;
137    height: $smaller-icon-size;
138    width: $smaller-icon-size;
139  }
140
141  &.icon-check {
142    background-image: url('chrome://global/skin/icons/check.svg');
143  }
144
145  &.icon-download {
146    background-image: url('chrome://browser/skin/downloads/downloads.svg');
147  }
148
149  &.icon-copy {
150    background-image: url('chrome://global/skin/icons/edit-copy.svg');
151  }
152
153  &.icon-open-file {
154    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-open-file-16.svg');
155  }
156
157  &.icon-webextension {
158    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg');
159  }
160
161  &.icon-highlights {
162    background-image: url('chrome://global/skin/icons/highlights.svg');
163  }
164
165  &.icon-arrowhead-down {
166    background-image: url('chrome://global/skin/icons/arrow-down.svg');
167  }
168
169  &.icon-arrowhead-down-small {
170    background-image: url('chrome://global/skin/icons/arrow-down-12.svg');
171    background-size: $smaller-icon-size;
172    height: $smaller-icon-size;
173    width: $smaller-icon-size;
174  }
175
176  &.icon-arrowhead-forward-small {
177    background-image: url('chrome://global/skin/icons/arrow-right-12.svg');
178    background-size: $smaller-icon-size;
179    height: $smaller-icon-size;
180    width: $smaller-icon-size;
181
182    &:dir(rtl) {
183      background-image: url('chrome://global/skin/icons/arrow-left-12.svg');
184    }
185  }
186
187  &.icon-arrowhead-up {
188    background-image: url('chrome://global/skin/icons/arrow-up.svg');
189  }
190
191  &.icon-add {
192    background-image: url('chrome://global/skin/icons/plus.svg');
193  }
194
195  &.icon-minimize {
196    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-minimize-16.svg');
197  }
198
199  &.icon-maximize {
200    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-maximize-16.svg');
201  }
202
203  &.icon-arrow {
204    background-image: url('chrome://global/skin/icons/arrow-right-12.svg');
205  }
206}
207