样式 md-icon

Question

您好，我正在使用 angular material，我想让 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>

和 css 文件用于 dashboard.avatar

的语法

#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);
}

为什么样式没有出现在图标上？
我意识到带有 class 头像的 ID "dashboard" 不起作用，但是当我将所有内容 html 放入 div 标签并设置 id 仪表板时，它工作正常但是后来我的观点有问题，因为我有主要的 div，然后是另一个 div 的内容。

谢谢

Answer 1

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

修复非常简单：

只需将一条规则添加到您的 css:

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

样式 md-icon

Styling md-icon

html

css

angularjs

angular-material