I'm using a polymer core-icon within my custom element and attempting to style it by it's element name. The button in my example shows up with a blue background, why doesn't the core-icon appear larger(200X200px)? I'm I misunderstanding something?
<html>
<head>
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<polymer-element name="test-one" noscript>
<template>
<style>
core-icon {
width: 200px;
height: 200px;
}
button {
background-color: blue;
}
</style>
<h1><core-icon icon="android"></core-icon>howdy! </h1>
<button>I'm a button</button>
</template>
</polymer-element>
</head>
<body>
<test-one>transclude me!</test-one>
</body>
</html>
It seems the html /deep/ core-icon style doesn't get overridden by a tag style, and you need to use either the icon attribute give the core-icon an additional id and style it by that.