Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 499ad15

Browse files
williamernestwilliamernest
authored
feat(button): Add support for SVG icons (#2352)
 * feat(button): Update * feat(button): Update for comments * feat(button): Update for svg icons * feat(button): Remove img element option * feat(button): Update to use vertical align and class * feat(button): Update for comments * feat(button): Update readme/style * feat(button): Update for comments * feat(button): Update for comments
1 parent 1065a74 commit 499ad15

File tree

4 files changed

+81
-0
lines changed

4 files changed

+81
-0
lines changed

‎demos/button.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,13 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
122122
<i class="material-icons mdc-button__icon">favorite</i>
123123
Icon
124124
</button>
125+
<button class="mdc-button">
126+
<svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
127+
<path fill="none" d="M0 0h24v24H0z"/>
128+
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
129+
</svg>
130+
SVG Icon
131+
</button>
125132
<a href="javascript:void(0)" class="mdc-button">
126133
Link
127134
</a>
@@ -144,6 +151,13 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
144151
<i class="material-icons mdc-button__icon">favorite</i>
145152
Icon
146153
</button>
154+
<button class="mdc-button mdc-button--raised">
155+
<svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
156+
<path fill="none" d="M0 0h24v24H0z"/>
157+
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
158+
</svg>
159+
SVG Icon
160+
</button>
147161
<a href="javascript:void(0)" class="mdc-button mdc-button--raised">
148162
Link
149163
</a>
@@ -166,6 +180,13 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
166180
<i class="material-icons mdc-button__icon">favorite</i>
167181
Icon
168182
</button>
183+
<button class="mdc-button mdc-button--unelevated">
184+
<svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
185+
<path fill="none" d="M0 0h24v24H0z"/>
186+
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
187+
</svg>
188+
SVG Icon
189+
</button>
169190
<a href="javascript:void(0)" class="mdc-button mdc-button--unelevated">
170191
Link
171192
</a>
@@ -188,6 +209,13 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
188209
<i class="material-icons mdc-button__icon">favorite</i>
189210
Icon
190211
</button>
212+
<button class="mdc-button mdc-button--stroked">
213+
<svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
214+
<path fill="none" d="M0 0h24v24H0z"/>
215+
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
216+
</svg>
217+
SVG Icon
218+
</button>
191219
<a href="javascript:void(0)" class="mdc-button mdc-button--stroked">
192220
Link
193221
</a>
@@ -223,6 +251,13 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
223251
<i class="material-icons mdc-button__icon">favorite</i>
224252
Icon
225253
</button>
254+
<button class="mdc-button" data-demo-no-js>
255+
<svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
256+
<path fill="none" d="M0 0h24v24H0z"/>
257+
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
258+
</svg>
259+
SVG Icon
260+
</button>
226261
<a href="javascript:void(0)" class="mdc-button" data-demo-no-js>
227262
Link
228263
</a>
@@ -245,6 +280,13 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
245280
<i class="material-icons mdc-button__icon">favorite</i>
246281
Icon
247282
</button>
283+
<button class="mdc-button mdc-button--raised" data-demo-no-js>
284+
<svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
285+
<path fill="none" d="M0 0h24v24H0z"/>
286+
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
287+
</svg>
288+
SVG Icon
289+
</button>
248290
<a href="javascript:void(0)" class="mdc-button mdc-button--raised" data-demo-no-js>
249291
Link
250292
</a>
@@ -267,9 +309,17 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
267309
<i class="material-icons mdc-button__icon">favorite</i>
268310
Icon
269311
</button>
312+
<button class="mdc-button mdc-button--unelevated" data-demo-no-js>
313+
<svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
314+
<path fill="none" d="M0 0h24v24H0z"/>
315+
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
316+
</svg>
317+
SVG Icon
318+
</button>
270319
<a href="javascript:void(0)" class="mdc-button mdc-button--unelevated" data-demo-no-js>
271320
Link
272321
</a>
322+
</a>
273323
</div>
274324
</fieldset>
275325

@@ -289,6 +339,13 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
289339
<i class="material-icons mdc-button__icon">favorite</i>
290340
Icon
291341
</button>
342+
<button class="mdc-button mdc-button--stroked" data-demo-no-js>
343+
<svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
344+
<path fill="none" d="M0 0h24v24H0z"/>
345+
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
346+
</svg>
347+
SVG Icon
348+
</button>
292349
<a href="javascript:void(0)" class="mdc-button mdc-button--stroked" data-demo-no-js>
293350
Link
294351
</a>

‎packages/mdc-button/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,17 @@ We recommend you load [Material Icons](https://material.io/icons/) from Google F
7070
</button>
7171
```
7272

73+
It's also possible to use an SVG icon:
74+
75+
```html
76+
<button class="mdc-button">
77+
<svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="...">
78+
...
79+
</svg>
80+
SVG Icon
81+
</button>
82+
```
83+
7384
### CSS Classes
7485

7586

‎packages/mdc-button/_mixins.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,14 @@
131131
vertical-align: top;
132132
}
133133

134+
@mixin mdc-button__icon-svg_ {
135+
@include mdc-rtl-reflexive-box(margin, right, 8px);
136+
137+
margin-top: -2px;
138+
fill: currentColor;
139+
vertical-align: middle;
140+
}
141+
134142
@mixin mdc-button--stroked_() {
135143
border-style: solid;
136144

‎packages/mdc-button/mdc-button.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@
3434
.mdc-button__icon {
3535
@include mdc-button__icon_;
3636
}
37+
38+
// stylelint-disable-next-line selector-no-qualifying-type
39+
svg.mdc-button__icon {
40+
@include mdc-button__icon-svg_;
41+
}
3742
}
3843

3944
.mdc-button--raised,

0 commit comments

Comments
 (0)