diff --git a/src/components/icon/iconDirective.js b/src/components/icon/iconDirective.js
index 6dfe26c6029..d8b077310b4 100644
--- a/src/components/icon/iconDirective.js
+++ b/src/components/icon/iconDirective.js
@@ -148,36 +148,9 @@ function mdIconDirective($mdIcon, $mdTheming, $mdAria, $interpolate ) {
svgSrc : '@mdSvgSrc'
},
restrict: 'E',
- transclude:true,
- template: getTemplate,
- link: postLink
+ link : postLink
};
- function getTemplate(element, attr) {
- var isEmptyAttr = function(key) { return angular.isDefined(attr[key]) ? attr[key].length == 0 : false },
- hasAttrValue = function(key) { return attr[key] && attr[key].length > 0; },
- attrValue = function(key) { return hasAttrValue(key) ? attr[key] : '' };
-
- // If using the deprecated md-font-icon API
- // If using ligature-based font-icons, transclude the ligature or NRCs
-
- var tmplFontIcon = '';
- var tmplFontSet = '';
-
- var tmpl = hasAttrValue('mdSvgIcon') ? '' :
- hasAttrValue('mdSvgSrc') ? '' :
- isEmptyAttr('mdFontIcon') ? '' :
- hasAttrValue('mdFontIcon') ? tmplFontIcon : tmplFontSet;
-
- // If available, lookup the fontSet style and add to the list of classnames
- // NOTE: Material Icons expects classnames like `.material-icons.md-48` instead of `.material-icons .md-48`
-
- var names = (tmpl == tmplFontSet) ? $mdIcon.fontSet(attrValue('mdFontSet')) + ' ' : '';
- names = (names + attrValue('class')).trim();
-
- return $interpolate( tmpl )({ classNames: names });
- }
-
/**
* Directive postLink
@@ -186,6 +159,8 @@ function mdIconDirective($mdIcon, $mdTheming, $mdAria, $interpolate ) {
function postLink(scope, element, attr) {
$mdTheming(element);
+ prepareForFontIcon();
+
// If using a font-icon, then the textual name of the icon itself
// provides the aria-label.
@@ -220,6 +195,7 @@ function mdIconDirective($mdIcon, $mdTheming, $mdAria, $interpolate ) {
});
}
+
function parentsHaveText() {
var parent = element.parent();
if (parent.attr('aria-label') || parent.text()) {
@@ -230,5 +206,17 @@ function mdIconDirective($mdIcon, $mdTheming, $mdAria, $interpolate ) {
}
return false;
}
+
+ function prepareForFontIcon () {
+ if (!scope.svgIcon && !scope.svgSrc) {
+ if (scope.fontIcon) {
+ element.addClass('md-font');
+ element.addClass(scope.fontIcon);
+ } else {
+ element.addClass($mdIcon.fontSet(scope.fontSet));
+ }
+ }
+
+ }
}
}
diff --git a/src/components/icon/iconDirective.spec.js b/src/components/icon/iconDirective.spec.js
index 47d8265bf6e..aeea0bab783 100644
--- a/src/components/icon/iconDirective.spec.js
+++ b/src/components/icon/iconDirective.spec.js
@@ -25,12 +25,19 @@ describe('mdIcon directive', function() {
it('should render correct HTML with md-font-icon value as class', function() {
el = make( '');
- expect(el.html()).toEqual('');
+
+ expect(el.html()).toEqual('');
+ expect( clean(el.attr('class')) ).toEqual("md-font android");
+
});
it('should transclude class specifiers', function() {
el = make( '');
- expect(el.html()).toEqual('');
+
+ expect(el.html()).toEqual('');
+ expect(el.hasClass('md-font')).toBe(true);
+ expect(el.hasClass('android')).toBe(true);
+ expect(el.hasClass('material-icons')).toBe(true);
});
it('should not render any inner content if the md-font-icon value is empty', function() {
@@ -38,26 +45,57 @@ describe('mdIcon directive', function() {
expect(el.html()).toEqual('');
});
+ it('',function() {
+ el = make('\
+ \
+ \
+ ');
+
+ $scope.$apply(function(){
+ $scope.font = {
+ name: 'icon-home',
+ color: "#777",
+ size: 48
+ };
+ });
+
+ expect(el.attr('md-font-icon')).toBe($scope.font.name);
+ expect(el.hasClass('step')).toBe(true);
+ expect(el.hasClass('material-icons')).toBe(true);
+ expect(el.attr('aria-label')).toBe($scope.font.name + $scope.font.size);
+ expect(el.attr('role')).toBe('img');
+ })
+
});
describe('using font-icons with ligatures: md-font-set=""', function() {
it('should render correct HTML with ligatures', function() {
el = make( 'face');
- expect(el.html()).toEqual('face');
+
+ expect(el.text()).toEqual('face');
+ expect(el.hasClass('material-icons')).toBeTruthy();
+ expect(el.hasClass('md-48')).toBeTruthy();
});
it('should render correctly using a md-font-set alias', function() {
$mdIconProvider.fontSet('fa', 'fontawesome');
el = make( 'email');
- expect(el.html()).toEqual('email');
+
+ expect(el.text()).toEqual('email');
+ expect( clean(el.attr('class')) ).toEqual("fontawesome");
});
it('should render correctly using md-font-set value as class', function() {
el = make( 'email');
- expect(el.html()).toEqual('email');
+
+ expect(el.text()).toEqual('email');
+ expect( clean(el.attr('class')) ).toEqual("fontawesome");
});
});
@@ -65,27 +103,34 @@ describe('mdIcon directive', function() {
it('should render with icon classname', function() {
el = make( '');
- expect(el.html()).toEqual('');
+
+ expect(el.text()).toEqual('');
+ expect(el.hasClass('material-icons')).toBeTruthy();
+ expect(el.hasClass('custom-cake')).toBeTruthy();
});
it('should support clearing default fontset', function() {
$mdIconProvider.defaultFontSet('');
el = make( '');
- expect(el.html()).toEqual('');
+ expect( clean(el.attr('class')) ).toEqual("custom-cake");
el = make( 'apple');
- expect(el.html()).toEqual('apple');
+ expect(el.text()).toEqual('apple');
+ expect( clean(el.attr('class')) ).toEqual("custom-cake");
});
it('should support clearing an invalid font alias', function() {
el = make( '');
- expect(el.html()).toEqual('');
+ expect(el.hasClass('none')).toBeTruthy();
+ expect(el.hasClass('custom-cake')).toBeTruthy();
el = make( 'apple');
- expect(el.html()).toEqual('apple');
+ expect(el.text()).toEqual('apple');
+ expect(el.hasClass('none')).toBeTruthy();
+ expect(el.hasClass('custom-cake')).toBeTruthy();
});
});
@@ -224,5 +269,16 @@ describe('mdIcon directive', function() {
return el;
}
+ /**
+ * Utility to remove extra attributes to the specs are easy to compare
+ */
+ function clean(style) {
+ return style
+ .replace(/ng-scope|ng-isolate-scope|md-default-theme/gi,'')
+ .replace(/\s\s+/g,' ')
+ .replace(/\s+\"/g,'"')
+ .trim();
+ }
+
});