Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 9ce4f9e

Browse files
programmistThomasBurleson
programmist
authored and
ThomasBurleson
committed
fix(icon): Use data URLS instead of $templateCache
Fixes #6531 Closes #7741
1 parent b3e401a commit 9ce4f9e

File tree

10 files changed

+38
-57
lines changed

10 files changed

+38
-57
lines changed

‎docs/app/img/icons/toggle-arrow.svg

Lines changed: 4 additions & 0 deletions
Loading

‎docs/app/js/app.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ var DocsApp = angular.module('docsApp', [ 'angularytics', 'ngRoute', 'ngMessages
88
'$routeProvider',
99
'$locationProvider',
1010
'$mdThemingProvider',
11+
'$mdIconProvider',
1112
function(SERVICES, COMPONENTS, DEMOS, PAGES,
12-
$routeProvider, $locationProvider, $mdThemingProvider) {
13+
$routeProvider, $locationProvider, $mdThemingProvider, $mdIconProvider) {
1314
$locationProvider.html5Mode(true);
1415

1516
$routeProvider
@@ -62,6 +63,8 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
6263
.primaryPalette('yellow')
6364
.dark();
6465

66+
$mdIconProvider.icon('md-toggle-arrow', 'img/icons/toggle-arrow.svg', 48);
67+
6568
$mdThemingProvider.theme('default')
6669
.primaryPalette('docs-blue')
6770
.accentPalette('docs-red');

‎docs/app/partials/menu-toggle.tmpl.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<span flex></span>
88
<span aria-hidden="true" class="md-toggle-icon"
99
ng-class="{'toggled' : isOpen()}">
10-
<md-icon md-svg-src="md-toggle-arrow"></md-icon>
10+
<md-icon md-svg-icon="md-toggle-arrow"></md-icon>
1111
</span>
1212
</div>
1313
<span class="md-visually-hidden">

‎src/components/autocomplete/js/autocompleteDirective.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ angular
124124
* input validation for the field.
125125
*/
126126

127-
function MdAutocomplete () {
127+
function MdAutocomplete ($$mdSvgRegistry) {
128128

129129
return {
130130
controller: 'MdAutocompleteCtrl',
@@ -285,7 +285,7 @@ function MdAutocomplete () {
285285
tabindex="-1"\
286286
ng-if="$mdAutocompleteCtrl.scope.searchText && !$mdAutocompleteCtrl.isDisabled"\
287287
ng-click="$mdAutocompleteCtrl.clear($event)">\
288-
<md-icon md-svg-icon="md-close"></md-icon>\
288+
<md-icon md-svg-src="' + $$mdSvgRegistry.mdClose + '"></md-icon>\
289289
<span class="_md-visually-hidden">Clear</span>\
290290
</button>\
291291
';

‎src/components/card/demoInCardActions/script.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11

22
angular.module('cardDemo3', ['ngMaterial'])
33

4+
.config(['$mdIconProvider', function($mdIconProvider) {
5+
$mdIconProvider.icon('md-toggle-arrow', 'img/icons/toggle-arrow.svg', 48);
6+
}])
47
.controller('AppCtrl', function($scope) {
58
$scope.imagePath = 'img/washedout.png';
69
});

‎src/components/chips/demoBasicUsage/script.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
'use strict';
33
angular
44
.module('chipsDemo', ['ngMaterial', 'ngMessages'])
5+
.config(['$mdIconProvider', function($mdIconProvider) {
6+
$mdIconProvider.icon('md-close', 'img/icons/ic_close_24px.svg', 24);
7+
}])
58
.controller('BasicDemoCtrl', DemoCtrl);
69

710
function DemoCtrl ($timeout, $q) {

‎src/components/chips/js/chipsDirective.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@
168168
type="button"\
169169
aria-hidden="true"\
170170
tabindex="-1">\
171-
<md-icon md-svg-icon="md-close"></md-icon>\
171+
<md-icon md-svg-src="{{ $mdChipsCtrl.mdCloseIcon }}"></md-icon>\
172172
<span class="_md-visually-hidden">\
173173
{{$mdChipsCtrl.deleteButtonLabel}}\
174174
</span>\
@@ -177,7 +177,7 @@
177177
/**
178178
* MDChips Directive Definition
179179
*/
180-
function MdChips ($mdTheming, $mdUtil, $compile, $log, $timeout) {
180+
function MdChips ($mdTheming, $mdUtil, $compile, $log, $timeout, $$mdSvgRegistry) {
181181
// Run our templates through $mdUtil.processTemplate() to allow custom start/end symbols
182182
var templates = getTemplates();
183183

@@ -294,6 +294,8 @@
294294
mdChipsCtrl.chipRemoveTemplate = chipRemoveTemplate;
295295
mdChipsCtrl.chipInputTemplate = chipInputTemplate;
296296

297+
mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdClose;
298+
297299
element
298300
.attr({ 'aria-hidden': true, tabindex: -1 })
299301
.on('focus', function () { mdChipsCtrl.onFocus(); });

‎src/components/datepicker/datePicker.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
* </hljs>
4848
*
4949
*/
50-
function datePickerDirective() {
50+
function datePickerDirective($$mdSvgRegistry) {
5151
return {
5252
template:
5353
// Buttons are not in the tab order because users can open the calendar via keyboard
@@ -56,7 +56,8 @@
5656
'<md-button class="md-datepicker-button md-icon-button" type="button" ' +
5757
'tabindex="-1" aria-hidden="true" ' +
5858
'ng-click="ctrl.openCalendarPane($event)">' +
59-
'<md-icon class="md-datepicker-calendar-icon" md-svg-icon="md-calendar"></md-icon>' +
59+
'<md-icon class="md-datepicker-calendar-icon" aria-label="md-calendar" ' +
60+
'md-svg-src="' + $$mdSvgRegistry.mdCalendar + '"></md-icon>' +
6061
'</md-button>' +
6162
'<div class="md-datepicker-input-container" ' +
6263
'ng-class="{\'md-datepicker-focused\': ctrl.isFocused}">' +

‎src/components/icon/js/iconService.js

Lines changed: 11 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
1-
angular
2-
.module('material.components.icon')
3-
.provider('$mdIcon', MdIconProvider);
1+
angular
2+
.module('material.components.icon')
3+
.constant('$$mdSvgRegistry', {
4+
'mdTabsArrow': 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyICIvPjwvZz48L3N2Zz4=',
5+
'mdClose': 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwYXRoIGQ9Ik0xOSA2LjQxbC0xLjQxLTEuNDEtNS41OSA1LjU5LTUuNTktNS41OS0xLjQxIDEuNDEgNS41OSA1LjU5LTUuNTkgNS41OSAxLjQxIDEuNDEgNS41OS01LjU5IDUuNTkgNS41OSAxLjQxLTEuNDEtNS41OS01LjU5eiIvPjwvZz48L3N2Zz4=',
6+
'mdCancel': 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwYXRoIGQ9Ik0xMiAyYy01LjUzIDAtMTAgNC40Ny0xMCAxMHM0LjQ3IDEwIDEwIDEwIDEwLTQuNDcgMTAtMTAtNC40Ny0xMC0xMC0xMHptNSAxMy41OWwtMS40MSAxLjQxLTMuNTktMy41OS0zLjU5IDMuNTktMS40MS0xLjQxIDMuNTktMy41OS0zLjU5LTMuNTkgMS40MS0xLjQxIDMuNTkgMy41OSAzLjU5LTMuNTkgMS40MSAxLjQxLTMuNTkgMy41OSAzLjU5IDMuNTl6Ii8+PC9nPjwvc3ZnPg==',
7+
'mdMenu': 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0zLDZIMjFWOEgzVjZNMywxMUgyMVYxM0gzVjExTTMsMTZIMjFWMThIM1YxNloiIC8+PC9zdmc+',
8+
'mdToggleArrow': 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGQ9Ik0yNCAxNmwtMTIgMTIgMi44MyAyLjgzIDkuMTctOS4xNyA5LjE3IDkuMTcgMi44My0yLjgzeiIvPjxwYXRoIGQ9Ik0wIDBoNDh2NDhoLTQ4eiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==',
9+
'mdCalendar': 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgM2gtMVYxaC0ydjJIOFYxSDZ2Mkg1Yy0xLjExIDAtMS45OS45LTEuOTkgMkwzIDE5YzAgMS4xLjg5IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMTZINVY4aDE0djExek03IDEwaDV2NUg3eiIvPjwvc3ZnPg=='
10+
})
11+
.provider('$mdIcon', MdIconProvider);
412

513
/**
614
* @ngdoc service
@@ -316,50 +324,7 @@ MdIconProvider.prototype = {
316324
return this;
317325
},
318326

319-
preloadIcons: function($templateCache) {
320-
var iconProvider = this;
321-
var svgRegistry = [
322-
{
323-
id: 'md-tabs-arrow',
324-
url: 'md-tabs-arrow.svg',
325-
svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "/></g></svg>'
326-
},
327-
{
328-
id: 'md-close',
329-
url: 'md-close.svg',
330-
svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/></g></svg>'
331-
},
332-
{
333-
id: 'md-cancel',
334-
url: 'md-cancel.svg',
335-
svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M12 2c-5.53 0-10 4.47-10 10s4.47 10 10 10 10-4.47 10-10-4.47-10-10-10zm5 13.59l-1.41 1.41-3.59-3.59-3.59 3.59-1.41-1.41 3.59-3.59-3.59-3.59 1.41-1.41 3.59 3.59 3.59-3.59 1.41 1.41-3.59 3.59 3.59 3.59z"/></g></svg>'
336-
},
337-
{
338-
id: 'md-menu',
339-
url: 'md-menu.svg',
340-
svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg>'
341-
},
342-
{
343-
id: 'md-toggle-arrow',
344-
url: 'md-toggle-arrow-svg',
345-
svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 48 48"><path d="M24 16l-12 12 2.83 2.83 9.17-9.17 9.17 9.17 2.83-2.83z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>'
346-
},
347-
{
348-
id: 'md-calendar',
349-
url: 'md-calendar.svg',
350-
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>'
351-
}
352-
];
353-
354-
svgRegistry.forEach(function(asset) {
355-
iconProvider.icon(asset.id, asset.url);
356-
$templateCache.put(asset.url, asset.svg);
357-
});
358-
359-
},
360-
361327
$get: ['$templateRequest', '$q', '$log', '$templateCache', '$mdUtil', '$sce', function($templateRequest, $q, $log, $templateCache, $mdUtil, $sce) {
362-
this.preloadIcons($templateCache);
363328
return MdIconService(config, $templateRequest, $q, $log, $mdUtil, $sce);
364329
}]
365330
};

‎src/components/tabs/js/tabsDirective.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ angular
9090
.module('material.components.tabs')
9191
.directive('mdTabs', MdTabs);
9292

93-
function MdTabs () {
93+
function MdTabs ($$mdSvgRegistry) {
9494
return {
9595
scope: {
9696
selectedIndex: '=?mdSelected'
@@ -108,7 +108,7 @@ function MdTabs () {
108108
'ng-class="{ \'md-disabled\': !$mdTabsCtrl.canPageBack() }" ' +
109109
'ng-if="$mdTabsCtrl.shouldPaginate" ' +
110110
'ng-click="$mdTabsCtrl.previousPage()"> ' +
111-
'<md-icon md-svg-icon="md-tabs-arrow"></md-icon> ' +
111+
'<md-icon md-svg-src="'+ $$mdSvgRegistry.mdTabsArrow +'"></md-icon> ' +
112112
'</md-prev-button> ' +
113113
'<md-next-button ' +
114114
'tabindex="-1" ' +
@@ -118,7 +118,7 @@ function MdTabs () {
118118
'ng-class="{ \'md-disabled\': !$mdTabsCtrl.canPageForward() }" ' +
119119
'ng-if="$mdTabsCtrl.shouldPaginate" ' +
120120
'ng-click="$mdTabsCtrl.nextPage()"> ' +
121-
'<md-icon md-svg-icon="md-tabs-arrow"></md-icon> ' +
121+
'<md-icon md-svg-src="'+ $$mdSvgRegistry.mdTabsArrow +'"></md-icon> ' +
122122
'</md-next-button> ' +
123123
'<md-tabs-canvas ' +
124124
'tabindex="{{ $mdTabsCtrl.hasFocus ? -1 : 0 }}" ' +

0 commit comments

Comments
 (0)