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

feat(icon): Add support to svg symbol icon set #11162

Merged
merged 1 commit into from
Apr 17, 2018
Merged

feat(icon): Add support to svg symbol icon set #11162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/app/img/icons/sets/symbol-icons.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 5 additions & 3 deletions src/components/icon/demoSvgIconSets/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@
<p>Display an icon from a pre-registered set of icons:</p>

<p>
<md-icon md-svg-icon="alarm" style="color: #0F0;" aria-label="Alarm Icon"></md-icon>
<md-icon md-svg-icon="social:cake" style="color: #f00;width:60px;height:60px;" aria-label="Cake Icon"></md-icon>
<md-icon md-svg-icon="social:people" style="color: #00F;" class="s48" aria-label="People Icon"></md-icon>
<md-icon md-svg-icon="alarm" style="color: #0F0;" aria-label="Alarm Icon"></md-icon>
<md-icon md-svg-icon="social:cake" style="color: #f00;width:60px;height:60px;" aria-label="Cake Icon"></md-icon>
<md-icon md-svg-icon="social:people" style="color: #00F;" class="s48" aria-label="People Icon"></md-icon>
<md-icon md-svg-icon="symbol:spinner" style="color: #f00;width:60px;height:60px;" aria-label="Spinner Icon"></md-icon>
<md-icon md-svg-icon="symbol:angular" class="s48" aria-label="Angular Icon"></md-icon>
</p>

</div>
1 change: 1 addition & 0 deletions src/components/icon/demoSvgIconSets/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@ angular.module('appSvgIconSets', ['ngMaterial'])
.config(['$mdIconProvider', function($mdIconProvider) {
$mdIconProvider
.iconSet('social', 'img/icons/sets/social-icons.svg', 24)
.iconSet('symbol', 'img/icons/sets/symbol-icons.svg', 24)
.defaultIconSet('img/icons/sets/core-icons.svg', 24);
}]);
18 changes: 18 additions & 0 deletions src/components/icon/icon.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,6 +406,7 @@ describe('MdIcon service', function() {
.icon('android' , 'android.svg')
.icon('c2' , 'c2.svg')
.iconSet('social' , 'social.svg' )
.iconSet('symbol' , 'symbol.svg' )
.iconSet('emptyIconSet' , 'emptyGroup.svg' )
.defaultIconSet('core.svg');

Expand All @@ -419,6 +420,7 @@ describe('MdIcon service', function() {

$templateCache.put('android.svg' , '<svg><g id="android"></g></svg>');
$templateCache.put('social.svg' , '<svg><g id="s1"></g><g id="s2"></g></svg>');
$templateCache.put('symbol.svg' , '<svg><symbol id="s1"></symbol><symbol id="s2" viewBox="0 0 32 32"></symbol></svg>');
$templateCache.put('core.svg' , '<svg><g id="c1"></g><g id="c2" class="core"></g></svg>');
$templateCache.put('c2.svg' , '<svg><g id="c2" class="override"></g></svg>');
$templateCache.put('emptyGroup.svg' , '<svg></svg>');
Expand Down Expand Up @@ -464,6 +466,22 @@ describe('MdIcon service', function() {
$scope.$digest();
});

it('should append configured SVG icon from symbol', function() {
var expected = updateDefaults('<svg xmlns="http://www.w3.org/2000/svg"></svg>');
$mdIcon('symbol:s1').then(function(el) {
expect(el.outerHTML).toEqual(expected);
});
$scope.$digest();
});

it('should append configured SVG icon from symbol with viewBox', function() {
var expected = updateDefaults('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>');
$mdIcon('symbol:s2').then(function(el) {
expect(el.outerHTML).toEqual(expected);
});
$scope.$digest();
});

it('should append configured SVG icon from default group', function() {
var expected = updateDefaults('<svg xmlns="http://www.w3.org/2000/svg"><g id="c1"></g></svg>');
$mdIcon('c1').then(function(el) {
Expand Down
9 changes: 8 additions & 1 deletion src/components/icon/js/iconService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -575,7 +575,14 @@ function MdIconService(config, $templateRequest, $q, $log, $mdUtil, $sce) {
* Define the Icon class
*/
function Icon(el, config) {
if (el && el.tagName != 'svg') {
// If the node is a <symbol>, it won't be rendered so we have to convert it into <svg>.
if (el && el.tagName.toLowerCase() === 'symbol') {
var viewbox = el.getAttribute('viewBox');
el = angular.element('<svg xmlns="http://www.w3.org/2000/svg">').html(el.innerHTML)[0];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just wanted to give a heads up that this caused a regression / exception as innerHTML is not supported for SVG elements in IE11. Investigation happening here.

if (viewbox) el.setAttribute('viewBox', viewbox);
}

if (el && el.tagName.toLowerCase() !== 'svg') {
el = angular.element('<svg xmlns="http://www.w3.org/2000/svg">').append(el.cloneNode(true))[0];
}

Expand Down