样式md-icon

Question

您好，我使用的是角形材质，并且我想使md-icon显示为圆形图像。我有一个sideNav和多个视图。在index.html我有这个：

<div layout="column" role="main" tabindex="-1" ui-view="" flex>

</div>

我在哪里展示我的观点。现在在我的一个视图中，我有一个工具栏和一个列表，如下所示：

<md-toolbar md-scroll-shrink>
    <div class="md-toolbar-tools">
    </div>
</md-toolbar>

<md-content id="dashboard">
    <md-list>
         <md-list-item class="md-3-line" ng-repeat="item in dashboard.todos">
             <md-icon md-svg-icon="svg-1" class="avatar"></md-icon>    
         </md-list-item>
    </md-list>
</md-content>

和用于dashboard.avatar样式的css文件

#dashboard .avatar {
   position: relative;
   width: 128px;
   height: 128px;
   border: 1px solid #ddd;
   border-radius: 50%;
   display: inline-block;
   overflow: hidden;
   margin: 0px;
   vertical-align: middle;
   zoom:0.70;
   transform: translateZ(0);
   -webkit-transform: scale(0.70);
   -moz-transform:scale(0.70);
}

为什么样式没有出现在图标上？
我意识到带有类头像的id“仪表板”无法正常工作，但是当我将所有内容html放入div标签并设置id仪表板时，它可以正常工作，但是我的视图存在问题，因为我拥有div，然后是包含内容的另一个div。

谢谢

Answer 1

好吧，你今天教了我一些东西。我什至没有意识到border-radius可以在svg元素上使用。

解决方法很简单：

只需在您的CSS中添加一条规则：

.avatar svg {
  border-radius: 50%;
}